CSS图像在图像加载前进行布局

Question

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

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

浏览器下载图像后,使用以下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

Answer 1

正如Pete已经说过的那样,在下载图像之前你不能进行任何(自动)计算,因此浏览器知道它的宽度和高度.

但由于您可以预先确定图像的宽高比,您可以通过在图像周围添加额外的占位符元素来尝试"解决方法" - 并利用padding以百分比形式给出的值始终基于宽度计算的事实一个元素,即使是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>

这是一个div没有高度的元素,但是一个填充顶部 - 它将使它的实际"高度"为计算出的100%宽度的50%.(对于宽高比为2:1- 的图像,3:1填充顶部值必须相应地为33.333% - 基本上等等height/width*100.)

即使在加载图像之前,这应该会占用我们的占位符.

图像本身绝对位于此相对定位的占位符内 - 确保它显示在文档中的相同位置.

唯一可能有问题的是对于带有小数点的值必须进行舍入 - 1000像素的33.333%将是333.33像素,并且浏览器必须将其舍入为333像素.如果调整大小的图像具有334像素的实际高度,则它将仅流出占位符div跨越该一个像素的区域.可能取决于实际布局(以及您对像素完美准确度的迷信)是否可接受.