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/