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

css, html, image

Solution

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/

Problem

I am reading about responsive design and I noticed the following problem: One of the recommendations regarding "Fluid Images" is to use a CSS rule such as : ``` img { max-width: 100%; height: auto; } ``` but in order for it to have the right affect we need to strip inline image width and height attributes of the img tag. How that settle with It’s important to specify the width and height of an image in HTML ? Thanks

Original source