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

【问题标题】：How to pre-populate height of parent div of img?如何预先填充img的父div的高度？
【发布时间】：2017-11-11 08:00:50
【问题描述】：

<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 代码中看到的那样，容器的宽度最初为 300 像素，并随着图像的加载而扩展。

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

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

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

当图像宽度为 200px，纵横比为 1:1 时，主容器应为 300x200。

CSS Image Layouting before image loaded 的回答没有帮助，因为它总是将容器的宽度强制为最小宽度。

【问题讨论】：

CSS Image Layouting before image loaded的可能重复
不同于^。我的问题在容器上设置了最小和最大宽度。
stackoverflow.com/questions/15520623/…的答案在我的例子中总是强制img大小为300px。
然后将a格式化为block，使其成为填充百分比所依据的包含块。
它不起作用。即使图像宽度是 200 或 400，我也希望它能够无缝工作，这意味着低于或高于容器的最小宽度。

标签： javascript html css

【解决方案1】：

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

【讨论】：

我应该在 min-height 中设置什么值？
无论您将min-height 设置为什么，都将是图像加载前容器的高度。 min-width 也是如此。 developer.mozilla.org/en-US/docs/Web/CSS/min-height
问题是我不知道最小高度是多少。图片大小不一。