具有未知尺寸的CSS寶麗來風格圖像

Question

我想使用CSS創建寶麗來風格的圖像。但是，我想將圖像放大以創建大縮略圖，以便所有圖像的大小相同。我事先不知道圖像的尺寸，它們可能不同。我正在考慮使用數字標籤和無花果標註照片。如何在圖像尺寸未知時創建縮略圖。我看着Create Resizing Thumbnails Using Overflow Property和Creating Thumbnails Using the CSS Clip Property，但都沒有考慮到未知尺寸。

Answer 1

This Example採用溢流技術僅通過設置寬度創建縮略圖，圖像的高度是自動設置的div容器然後隱藏多餘的圖像超出你想顯示什麼。

然後通過簡單地使用填充和容器div，您可以創建白色寶麗來影響。

This Example讓圖像有完整的100％寬度，並找到最短高度的圖像，並將這個高度應用於所有的寶麗來圖像，因此所有的寶麗來都是相同的高度。如果你真的不擔心讓他們每個人身高相同。然後做this way

Answer 2

剪輯僅適用於矩形。溢出將正常工作，只需定義類中圖像的寬度。

Example

Answer 3

這與figure和figcaption標籤相當簡單，我可以重新創建沒有任何多餘標記的效果。

真正重要的CSS是：

figure{height:155px; width:125px; overflow:hidden;} 

，並通過應用position:relative;到figure爲好，並使用在figcaption一些相對定位，你可以得到一個整潔的寶麗來效果。

Demo

因爲你建議他們，我敢肯定，你知道如何figure和figcaption跨瀏覽器的支持。