如何预先填充img的父div的高度？

Question

<div class="main-container"> 
    <a> 
    <img class="img-responsive" /> 
    </a> 
</div> 

.container { 
    min-width: 300px; 
    width: fit-content; 
    max-width: 50%; 
} 

.img-responsive { 
    max-width: 100%; 
    height: auto; 
} 

此代码正常工作，但正如您在CSS代码中看到的，容器的宽度最初为300px，并且会在加载图像时展开。

图像加载需要时间，所以主容器以width = 300，height = 0开始。

我想主容器在图像加载之前已经被展开。我有图像的纵横比和宽度。如果可能，我想要css解决方案。

例如，如果图像宽度为400px，纵横比为1：1，我希望主容器为400x400，以便在加载之前预先填充img的空间。

而当图像宽度为200px，宽高比为1：1时，主容器应为300x200。

从CSS Image Layouting before image loaded得到的答案没有帮助，因为它始终强制容器宽度为最小宽度。

Answer 1

您可以分别将div的min-width和min-height分别设置为图像的宽度和高度。