我希望在我的移动网站上展示不同但已知高度/宽度的图片,并满足以下两个限制:
- 图片应占据浏览器视图的整个宽度
- 高度应按比例缩放(向下或向上)
一旦浏览器下载了图像,使用以下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。
更新
我想我不是唯一遇到这个问题的人:https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height