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

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;

然后我将其:before伪元素设置div为所需宽高比的适当高度.CSS中的填充是一个内在属性,这意味着它基于元素的宽度,允许您指定反映比率的百分比.您指定了800x500图像,因此(500/800*100) = 62.5%我的padding-top

然后,您可以绝对定位图像以填充容器的整个宽度和高度(这就是我们设置它的原因position: relative;)

这样做意味着div元素是图像的大小,无论图像是否加载到图像中(图像本身与容器大小无关,因为它绝对定位)