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

使用响应流体网格，图像为800px 500px

问题：加载图像时，页脚会在加载图像时位于顶部并向下推

设置：图像使用div，页脚使用div

目标：让页脚始终保持在正确的位置，而不是试图把它放在一个绝对点，只是希望有图像间距占

想法：也许使用800x500的透明png，这样它会在图像之前先加载

担忧：在800x500处创建div占位符可能不起作用，因为这些图像在流体网格中是响应的，因此除非观众有一个巨大的显示器，否则它们永远不会达到该大小

加载图像时的最终结果：

当前问题：

要加载图像的目标：

---

当我知道无论元素/屏幕的宽度如何，某些东西的纵横比都将保持不变时，我会这样做：

.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%;
}

下面是一个完整的演示：

我用一个

图像夹

类将每个图像包装在一个

div

中（它的样式为您提供了所示的每行3个模式），并确保它是

位置：相对的

然后，我将
div的
伪元素前面的
：设置为所需纵横比的适当高度。CSS中的填充是一个固有属性，这意味着它基于元素的宽度，允许您分配反映比率的百分比。您指定了800x500个图像，因此
（500/800*100）=62.5%
作为我的
填充顶部

然后，您可以完全定位图像以填充容器的整个宽度和高度（这就是为什么我们将其设置为
position:relative；
）

这样做意味着
div
元素是图像的大小，无论图像是否加载到其中（图像本身与容器大小无关，因为它是绝对定位的）
您可以在CSS中创建一个透明图像以用于加载，然后替换
onLoad
回调中的透明图像引用…谢谢@abiessu你能给我指出正确的执行方向吗？这是一个我总结出来的关于用CSS创建图像的基本方法的答案。我相信也有办法让它透明。谢谢，但我不知道这意味着什么。谢谢，这真是太酷了，布莱克。然而，这方面存在一些问题。当图像加载时，它会显示损坏的图像图标（我正在使用FF）。其次，这是我的错，我没有提到我的图像从4宽下降到3宽到2宽的断点。所以没有必要无限期地增加3个宽度。想法？嗨，我使用了一个
img
元素只是为了适合你的例子，但实际上我没有放一个有效的图像源，这就是为什么你会看到它。如果你真的付诸实践，情况就不会是这样了。就断点而言，只需使用与图像相同的方式设置容器
div
，纵横比将始终保持正确，无论您将
div
设置为什么宽度。是的，这是肯定的。我试着用正确的图像链接来编写代码，但仍然可以看到。可能只是我的浏览器？我已经更新了我的演示以使用真实图像：。你看到同样的问题了吗？你绝对不应该看到断开的图像链接是的，那些placehold-it图像会立即加载，因为它们的尺寸非常小。我粘贴了一些较大的图像链接，加载时会短暂出现破损的框。