Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel