如何预先填充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解决方案。

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

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

来自CSS Image Layouting before image loaded的答案无济于事，因为它总是强制容器的宽度为最小宽度。

Answer 1

您可以将min-width的{​​{1}}和min-height分别设置为图片的宽度和高度。