tagged css

Placeholder Images

The size of my images changes fluidly with my responsive layout. Since the browser does not know their heights a priori, the space collapses while the images are still loading. Once the images load the entire page reflows and the rest of the content jumps around to make space for them. It would be much better if the space for the images was reserved from the start and, as a bonus, if some lower resolution version of the images displayed, while the images load. Here is how I do it.

Equal Height Images with Flexbox

Images on the Web have a mind of their own. Want to place two fluid images side by side so that their heights are always equal? Flexbox to the rescue!