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