For my mobile website I want to show images of different but known heights/widths with two constraints:

  • The image should take up the whole width of the browserview
  • The height should be scaled (down or up) accordingly to keep the proportions

As soon as the browser downloads the image, it is really easy with the following CSS:

<img src="myImageURl" style="width: 100%; height: auto;" />

But because the loading of the image takes some time, I want the browser to layout the image before it downloads it. So the browser does not need to rerender the page, once he fetches the image. I tried the following approaches, which failed:

// The image is not layouted before fetched
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" /> 

// The image is layouted, but wrong: height is not proportional to the width anymore
<img src="myImageURl" style="width: 100%; height: myImageHeight;" />

I would love some help here. But please in CSS, I don't want to use Javascript / jQuery if I don't have to.

UPDATE

I guess I am not the only one with this problem: https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height

css image layout
Edit
Report