相关疑难解决方法(0)

对于我的移动网站,我想显示具有两个约束的不同但已知高度/宽度的图像:

• 图像应占用浏览器视图的整个宽度
• 高度应相应缩放(向下或向上)以保持比例

浏览器下载图像后,使用以下CSS非常简单:

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

但是因为加载图像需要一些时间,我希望浏览器在下载之前布局图像.因此,一旦获取图像,浏览器就不需要重新呈现页面.我尝试了以下方法,但失败了:

// 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;" />

我会在这里得到一些帮助.但请在CSS中,如果我不需要,我不想使用Javascript/jQuery.

UPDATE

我想我不是唯一一个这样的问题:https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height