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

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

Answers


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/


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).


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.


Need Your Help

SharePoint designer workflow not changing after publish

sharepoint sharepoint-2010 workflow sharepoint-designer

I'm working on SharePoint workflow (SharePoint 2010) in SharePoint designer 2010. I was published it many times without problems. But after many publishes (I thing 30) SharePoint stop to changing

Recognize the characters of license plate

python c++ opencv

I try to recognize the characters of license plates using OCR, but my licence plate have worse quality.