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

<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，并且会在加载图像时展开。如何预先填充img的父div的高度？

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

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

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

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

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

来源

2017-11-10 emil

[图像加载之前的CSS图像布局]可能的重复（https://stackoverflow.com/questions/15520623/css-image-layouting-before-image-loaded） – CBroe

它与^不同。我的问题在容器上设置了最小和最大宽度。 – emil

在我的例子中，https://stackoverflow.com/questions/15520623/css-image-layouting-before-image-loaded的答案总是强制img大小为300px。 – emil

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

来源

2017-11-10 23:45:57

我应该在最小高度中设置什么值？ – emil

不管你想要它是多么大... –

我希望它是正确的.. – emil

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

回答

相关问题