根据figcomment大小自动调整图像大小？答案

【问题标题】：Autosizing image based on figcomment size?根据figcomment大小自动调整图像大小？
【发布时间】：2022-07-04 16:37:50
【问题描述】：

希望有人能指出我正确的方向。我有一个简单的网格照片库（图像的大小和纵横比不匹配）。

我试图弄清楚如何调整的高度，以便为留出足够的空间（高度根据标签的数量而变化）。

如果我将设置为 'height: 100%;'，会溢出
。
如果我设置 'height: auto;'，风景图片会在上方留下太多空间。

有没有办法正确调整的大小，使其填充

而无需将推到外面？

将放在上方并设置

'overflow: hidden' 可以满足我的要求，但我更希望将标签放在图像下方？

<figure>
  <a href="/photo/349">
    <img src="/images/77.jpeg">
  </a>
  <figcaption>
    <a href="/tag/dog">dog</a>
  </figcaption>
</figure>
<figure>
  <a href="/photo/251">
    <img src="/images/104.jpeg">
  </a>
  <figcaption>
    <a href="/tag/tink">tink, </a>
    <a href="/tag/dog">dog, </a>
    <a href="/tag/human">human</a>
  </figcaption>
</figure>
<figure>
  <a href="/photo/361">
    <img src="/images/88.jpeg">
  </a>
  <figcaption>
    <a href="/tag/adam">adam, </a>
    <a href="/tag/dio">dio, </a>
    <a href="/tag/dog">dog, </a>
    <a href="/tag/human">human, </a>
    <a href="/tag/car">car</a>
  </figcaption>
</figure>

section {
  display: grid;
  column-gap: var(--colGap);
  row-gap: calc(var(--colGap) * 1.618);
  grid-template-columns: repeat(auto-fill, var(--photoW));
  justify-content: center;
}
figure {
  width: var(--photoW);
  height: calc(var(--photoW) * 1.618);
  padding: 5px;
  border: 2px solid var(--accent);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
figcaption {
  padding: .3em;
  margin-left: -7px;
  width: var(--photoW);
  color: var(--dark);
  font-size: 18px;
  text-align: center;
}

【问题讨论】：

标签： html css

【解决方案1】：

在写上面的过程中我意识到我可以通过让图像完全填充图形然后绝对定位figcomment来解决问题。

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
figcaption {
  position: absolute;
  right: 5px;
  bottom: 2px;
}

这可行，但如果有任何更优雅的解决方案我会感兴趣？

【讨论】：