Fluid Images: How to set width and height?

Question

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 1

The other answers are plain incorrect. With the help CBroe I found a solution: https://stackoverflow.com/questions/15520623/browser-image-layouting-in-css-before-image-loaded-with-whole-width-and-proporti

Basically you make use of the fact that padding values given in percentage always are calculated based on the width of an element, even for padding-top/-bottom.

<div style="position:relative; width:100%; height:0; padding-top:50%;">
  <img style="position:absolute; top:0; left:0; width:100%;" src="…">
</div>

You need to calculate padding-top yourself beforehand and it represents the aspectio ratio of your image, basically: height/width*100. So you would need php or whatever scripting language you use to calculate this aspect ratio. Other than that it works like a charm an no javascript is necessary.

Answer 2

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.

Answer 3

You're correct that you cannot set HTML width/height properties since the class will override them. However, if you set the style property you can override the CSS class.

If you need to "reserve space" so your layout doesn't get re-calculated mid-render, consider using min-height and min-width in the style tag on the IMG elements.

Answer 4

"so the rest of the page don't move when the image is loaded."

While that's a nice thing to achieve, it's really not doable in your situation, as your image is going to be sized based on the available space it has. It's the reverse logic of your typical fixed-sized image layout.

I wouldn't worry too much about having the page rearrange as it renders. That's how the web works. People are used to it.

Answer 5

Let's try this:

1. make background background-size:cover; It will stretch the image as wide as possible(while keeping the aspect ratio.)

2. Height to be min-height:100%; -this will make it 100% of its parent div.

3. Same with width min-width:100%;

Tips:

-to save like on speed you may wanna use different images for different devices. One way to do it is make a huge image then just use it for everything so for no matter how small the screen is it will always scale down but that would cause 4in mobile screen to download a wallpaper of 27 in monitor for no reason. Fast sites are important in Google search. So yea.

-not in all conditions i'd want my images to scale down with the size of devices. Let's say there is image with some text on it, and i rather scroll left and right to read it then not be able to read it because it was re-sized as such that it left and right fits the whole screen and thus the text is barely visible let alone readable.