Responsive Image vs specify the width and height of an image in HTML [closed]

Although (as I stated in my other answer) the width and height attributes do not interfere with fluid images, fluid images do interfere with not-yet-loaded images taking up the proper amount of space in browsers other than Chrome. There is a workaround for this: wrap the image in a div with an intrinsic ratio, as described in this article: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper {
    max-width: 200px; /* The actual width of the image */
}

.img-wrapper2 {
    height: 0;
    padding-bottom: 100%; /* The image's height divided by its width */
}

Unfortunately this requires two wrapper divs, in order to get the max-width effect right. However, it does provide the same advantages to apparent loading speed that the width and height attributes provide. You may want to give .img-wrapper overflow: hidden to hide some of the pathological behavior of older IE.

jsFiddle: http://jsfiddle.net/7j3db/32/

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)