我可以自動縮小我的圖片下面我的圖片只使用HTML和CSS？

Question

我碰到了一個需要自動縮小圖像下文字包裝寬度。

例如：

<figure> 
    <img src="mypicture.jpg" /> 
    <figcaption> 
     This is a long description.This is a long description.This is a long description. 
    </figcaption> 
</figure> 

現在我想有一個border周圍img和figcaption，因爲我有很多不同的寬度圖像。所以我想自動縮小寬度以適合圖片的寬度。這是如果我有一個寬度爲100px的圖像，那麼我也想要我的012px100px。

你能告訴我，如果我可以做到這一點沒有JS，只使用純HTML和CSS？

Answer 1

它確實需要一些技巧。 您可以將容器顯示設置爲表並給它一個小寬度。它會自動對齊其內容寬度（如表格）。

這裏是一個example

Answer 2

figure { 
    display: table; 
} 
.page-content figure figcaption { 
    display: table-caption; 
    caption-side: bottom; 
} 

該完成的事情。 @Chris Lee的回答是正確的，如果我使用CSS指定固定圖像。對於我的情況，我不想指定每個圖像的寬度，因爲它的數量很大，寬度是隨機的。

頂端的CSS適合我。