如何在响应网格中加载图像时使用图像占位符？

Question

使用响应式流体网格和图像为800px x 500px

问题：当图像加载时，页脚就像顶部一样，并在图像加载时向下推。

设置：使用div为图像和div为页脚。

目标：让页脚始终保持在正确的位置，而不是试图将其置于绝对位置，只是想要考虑图像间距。

想法：也许在800x500处使用透明png，因此它会先在图像之前加载。

担心：创建一个800x500的div占位符可能不起作用，因为这些图像在流畅的网格中响应，所以除非观众有一个巨大的监视器，否则它们实际上永远不会达到那个大小。

加载图片时的最终结果：

当前问题：

加载图片的目标：

Answer 1

当我知道无论元素/屏幕的宽度是多少时，某些东西的宽高比都会保持不变，我会这样做：

.image-holder {
    display: inline-block;
    width: 33.333%;
    position: relative;
}
.image-holder:before {
    content:"";
    display: block;
    padding-top: 62.5%;
}
.image-holder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

这是一个完整的演示：http://jsfiddle.net/serv0m8o/1/

我将每张图片打包在div中，其中image-holder类（其样式为您提供的每行图案为3），并确保它为position: relative; < / p>

然后我将:before的{​​{1}}伪元素设置为所需宽高比的正确高度。 CSS中的填充是一个内在属性，这意味着它基于元素的宽度，允许您指定反映比率的百分比。您指定了800x500图片，因此div为(500/800*100) = 62.5%

然后，您可以绝对定位图像以填充容器的整个宽度和高度（这就是我们将其设置为padding-top的原因）

这样做意味着position: relative;元素是图像的大小，无论图像是否加载到图像中（图像本身与容器大小无关，因为它是绝对定位的）