html - CSS:如何将照片的宽度传播到父元素或祖父元素？

Question

我正在将一个图片库与不同宽高比的带字幕的图片放在一起。为了统一，我希望浏览器以相同的高度呈现每个图像，计算宽度以保持纵横比。但我似乎无法弄清楚如何将这个宽度传播到标题的宽度。

我的 HTML 看起来像这样:

<div class="photo">
  <a href="images/name.jpg">
    <img src="thumbs/name.jpg">
  </a>
  <div class="caption">Imagine long caption here</div>
</div>

这是我对 CSS 的众多尝试之一:

div.photo {
    margin: 5px;
    float: left;
    height: 7cm;
    margin-bottom: 3cm;
}

div.photo img {
    display: block;
    max-height: 7cm;
    width: auto;
}

div.caption {
    padding: 15px;
    text-align: center;
    display : block;
    width: 90%;
    overflow : auto;
}

这是我认为我正在完成的事情:

1. photo 元素的固定高度使所有内容都处于同一高度。

2. photo 元素的下边距为标题腾出了空间。

3. 给定图像上的 max-height 和 width: auto 保持纵横比。

4. 在标题上，text-align 和 display 属性使标题居中并正确换行。

这是我没有完成的事情:

• photo 元素变得足够宽，以至于许多标题比它们包含的照片宽得多，尤其是当照片是“窄肖像”9:16 纵横比时。

我真的很想避免编写一个程序来探测每个图像以发现其宽高比，然后手动强制包含元素的宽度。有没有办法让 CSS 设置元素的宽度以匹配后代中包含的图像的宽度？

Answer 1

看看下面的变体。您可以将图形的宽度设置为自动，这次它应该可以正确调整大小。希望这可以帮助!HTML:

<figure class="photo">
<img src="photo.jpg">
<figcaption>
Caption goes here.
</figcaption>
</figure>

CSS:

figure {
    display:table;
    margin:14px;
    padding:7px;
}
figure.photo {
    float:right;
}