After hours of brainstorming, I have encountered a dilemma while creating a 2-column layout page.
I am looking to implement a fixed background image loading technique to prevent users from mistakenly clicking on links before the images are fully loaded. Have you ever experienced the frustration of clicking on a link only to have the target change as an image loads, leading to even more confusion?
To visualize my question better, I have uploaded an image for reference:
https://i.sstatic.net/uea1Y.png
The provided code is as follows:
.wrapper {
text-align:center;margin:30px auto 0;width:410px;
background:#ffe;
}
.wrapper a {width:49%;display:inline-block;margin:1px}
a {display:inline-block}
b {display:block}
.wrapper-desired-look a img {
width:100%;
height:105px;
}
/* Base64 Image */
.wrapper a img {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbgAAADmCAMAAACQ52CyAAAAOVBMVEXu7u7R0dHOzs7V1dXJycni4uLb29vY2NjNzc3p6enf39/d3d28vLzr6+vl5eXQ0NDGxsbAwMC4uLgSPp6uAAAGWklEQVR42uzYAW6EIBBGYZhZoGjA3v+0tduk00pSdxHXNHnfFZ7+meAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4ESpuovV6PC84GPI7jJ5Snr5p/M/+Td/Vbsc0iKeH65PfF/LeY2huJcqIXkR8RocetTbWu4u1pe1KzV6+eRVs0OP4r/LeZ3Pb2fVvrqxlL3i7V7O2rlT1agi1k0nh96ttHJnt8uzillUlZuy33Jbif8pTdkNlycV2XZLxaF7K1fv4n9LIY+tlkS23VjKo1tp/9zodnb6t91YyoMWK7cVQzleLVq1bbfkcGQrrVwr1nL49G+pspRDttLKtdTa9Z7+bTeW8rji23Jtu6erzSqm7cZNOWIrd8rZs0rX6d92YymHbWVbrpWm+uCrv/xFlaUcxO+Ws3ZhT/Ky042lHL+VVq7f8mA3nR1GbKWVO7GdKkv5wc65JSkOA0Ew5Jb1sMPW3v+0S4Ch2dY41tZ0/VVyhIwsmsGMIy1+0UKAuRPhUiK2UpvDyBPhUkK2UpuDuBPhUvqyNYQ5606ES6kgtvKPmnN0FzKX0p09GnPBmxaES+nPFmKEHChK5lIiSGhxkoVLqaC2shRvczlzKRFszYgrzsEZcZkPwjqRrbjmHNy3OT4IC9rKUpy3Uow...
<h2>
The look without fixed width and height
</h2>
<div class="wrapper">
<a>
<img src="" alt=" How do I keep the ratio of the pre-set base64 background image? " />
<b>Title 1</b>
</a>
<a>
<img src="" alt="And let it resized to the desired width" />
<b>Title 2</b>
</a>
<a>
<img src="" alt="with pure CSS?" />
<b>Title 3</b>
</a>
</div>
<h2>
The desired look
</h2>
<div class="wrapper-desired-look wrapper">
<a>
<img src="" alt=" This look is what I expected " />
<b>Title 1</b>
</a>
<a>
<img src="" alt=" But I need to pre-set the width and height " />
<b>Title 2</b>
</a>
<a>
<img src="" alt=" property in the CSS" />
<b>Title 3</b>
</a>
Is there a way to achieve the desired look without relying solely on CSS?
If JavaScript is necessary, what approach would you recommend?