Set width/height of image to avoid reflow on image load

Question

When I use image tags in html, I try to specify its width and height in the img tag, so that the browser will reserve the space for them even before the images

Answer 1

I'm also looking for the answer to this problem. With max-width, width= and height=, the browser has enough data that it should be able to leave the right amount of space for an image but it just doesn't seem to work that way.

I worked around this with a jQuery solution for now. It requires you to provide the width= and height= for your tags.

CSS:

img { max-width: 100%; height: auto; }

HTML:

jQuery:

$('img').each(function() { 
    var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100;
    $(this).wrap('
');
});

This automatically applies the technique seen on: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/