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。

更新

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

- Pascal Klein

---

除非您使用某种脚本语言，否则无法完成此操作 - 浏览器在下载图像之前不知道其大小，因此如果您已经知道图像大小，则需要进行手动计算。 - Pete

实际上，浏览器确实知道图像的大小。至少在加载图像之前，我就知道图像的大小，并尝试使用<img>的高度和宽度属性“告诉”浏览器。但是这种方法并没有起作用。 - Pascal Klein

是的，但你没有告诉它调整后的高度 - 你告诉它原始高度，直到加载完成并且 CSS 生效之前，它将占用该高度的空间。 - Pete

我只是想说：在图片从服务器获取之前，我可以提供所有必要的信息来布局图片。我在这个帖子中问是否有一种适当的CSS方式告诉浏览器所有这些信息。如果没有，对我来说就像是CSS中缺少的功能，但至少我会知道目前为止不可能实现。 - Pascal Klein

可能是在加载前已声明宽度和高度的图像呈正方形渲染的重复问题。 - bloudermilk

好的，如果有任何重复的问题，那是另一个问题了。但是这里的答案不同且具有很高的价值，因为它具有纯CSS解决方案。 - Pascal Klein

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>

这是一个没有高度但有上内边距的

元素 - 这将为其实际“高度”提供计算后100％宽度的50％。 （这适用于纵横比为2：1的图像 - 对于3：1，上内边距始终为33.333％ - 基本上是 height/width*100。）

这样即使在图片加载之前，它也可以撑起占位符。

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

唯一可能有问题的是必须将具有小数点的值四舍五入 - 例如，1000像素的33.333％将为333.33像素，浏览器必须将其向下舍入为333像素。 但是，如果调整大小后的图像实际高度为334像素，则会从占位符

所撑起的区域流出一个像素。这可能取决于实际布局（以及您对像素完美准确性的追求），是否可以接受。

- CBroe

---

看起来你的解决方案非常有效！在我将其标记为已接受之前，我只需要测试一些东西。非常感谢。 - Pascal Klein