Fluid Images: How to set width and height?

I’m trying to build a fluid layout, for which I am styling big images with:

.fluid_img {
  height: auto;
  width: auto;
  max-width: 100%;
}

This works fine, the problem is that I can no longer use the width and height attributes in the html img tag (they will have no effect). I need those attributes so the browser can “save” the space needed for the image before it has been loaded, so the rest of the page don’t move when the image is loaded.

Is there any way to have both features? (fluid image + space saved before image load)

Answer

No, because you’re setting the absolute dimensions in HTML. Those cannot change like your image will, so it’s not realistic.

The most reasonable way I can think is to load the image into JavaScript. Then determine how large it has grown to “fit” into the fluid grid. Then you can apply these numbers as new width=”” and height=”” attributes in HTML. This is fairly roundabout, though. So I wouldn’t recommend it!

I may be glossing over some other ideas so you may wish to check Google. But from your description I don’t think you can have a fluid image with direct width/height attribs in HTML.

Attribution
Source : Link , Question Author : HappyDesigner , Answer Author : Jake

Leave a Comment