CSS：如何将宽度从照片传播到父元素或祖父元素？答案

【问题标题】：CSS: how to propagate width from photo to parent or grandparent element?CSS：如何将宽度从照片传播到父元素或祖父元素？
【发布时间】：2016-06-22 02:08:38
【问题描述】：

我正在整理一个图片库，其中包含不同纵横比的标题图片。为了统一，我希望浏览器以相同的高度渲染每个图像，计算宽度以保持纵横比。但我似乎无法弄清楚如何将此宽度传播到标题的宽度。

我的 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;
}

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

photo 元素的固定高度使所有内容都处于相同高度。
photo 元素的下边距为标题腾出空间。
给定图像上的max-height 和width: auto 保留纵横比。
在标题上，text-align 和 display 属性使标题居中并正确环绕。

这是我没有完成的：

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

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

【问题讨论】：

标签： html css image aspect-ratio

【解决方案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;
}

【讨论】：