图像加载前的 CSS 图像布局

Question

对于我的移动网站，我想显示不同但已知高度/宽度的图像，但有两个限制:

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

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

Answer 1

正如 Pete 所说，在下载图像之前您不能进行任何(自动)计算，因此浏览器知道它的宽度和高度。

但由于您能够预先确定图像的纵横比，您可以通过在图像周围添加额外的占位符元素来尝试“解决方法”——并利用 padding values given in percentage always are calculated based on the width of an element, even for 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 元素，但有一个 padding-top——这将给它一个实际“高度”为计算出的 100% 宽度的 50%。 (这适用于纵横比为 2:1 的图像——对于 3:1，padding-top 值必须相应地为 33.333%——依此类推，基本上是 height/width*100。)

甚至在加载图像之前，这应该会占据我们的占位符。

图像本身绝对定位在这个相对定位的占位符内——确保它显示在文档中的相同位置。

可能唯一有问题的是必须对带小数点的值进行舍入 – 1000 像素的 33.333% 将是 333.33 像素，浏览器必须将其向下舍入为 333 像素.但是，如果调整大小后的图像的实际高度为 334 像素，它只会流出占位符 div 跨越该像素的区域。可能取决于实际布局(以及您对像素完美精度的迷恋)是否可以接受。