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

Question

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

Answer 1

You don't need to strip the image width and height attributes.

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

Tested in Chrome, Firefox, Opera, IE9 and IE9 emulating IE7. Seems to work fine in all of them, with the exact CSS rule you mentioned.

EDIT: Tested with an image that could not be loaded: http://jsfiddle.net/7j3db/1/

This had the proper effect in Chrome and IE (even IE7), but not in Firefox or Opera. However, even in Firefox and Opera, the effect was better than if the width and height attributes were left out (because the width attribute still had an effect, even though the height attribute didn't).

Further testing with alt text (http://jsfiddle.net/7j3db/2/): Handled perfectly by IE7, but IE9 joins Opera, and IE8 does something really strange (the image height depends on the length of the alt text - the more alt text, the less space). Chrome seems to ignore the alt text entirely. Opera and FF show the alt text, but otherwise have essentially the same behavior as they did before. The width and height attributes do not appear to be responsible for any of these alt text woes, however (except in IE8, to some extent).

Answer 2

You can achieve this by adding

html, body{
max-width:100%;
width:100%;
}

and also putting these properties on the parent div of the img tag.