使Div容器匹配图像的大小，然后加载到不同大小的设备上

Question

这里的总菜鸟CSS问题：我的图像的自然分辨率为900x576，周围的<div>容器

<div class="img-container">
    <img src="some-image.png" />
</div>

此图像将显示在许多不同的移动设备上，所有移动设备都具有不同的分辨率。图像将根据其显示的设备增长或缩小，并且将从服务器加载（可能需要一些时间或2）

我想将img-container动态调整大小到图像的尺寸，无论它显示在哪个设备上，所以当图像最终加载时，div不会突然从0px的高度增长（因为它内部没有任何东西）到图像的高度

这可能是一个如此简单的任务，我忽略了它 - 这可以纯粹用CSS完成吗？

Answer 1

如果图像总是具有相同的宽高比，则可以设置

.img-container {
    position: relative;
    padding-bottom: 80%; // ratio 5:4
}
.img-container img {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
}