圖片 CSS 設定詳解：讓圖片自動適應容器並置中顯示

更新日期： 2024 年 11 月 4 日

在前端開發中，對於圖片的展示，我們經常會希望圖片自動適應其容器的比例，並且在容器內置中顯示。

透過適當的 CSS 設定，我們可以輕鬆達到這種效果。

以下將針對一段範例代碼進行深入解析，讓您了解如何使用 aspect-ratio、overflow、position 等 CSS 屬性來實現這樣的效果。

HTML 結構

<div class="card_img">
    <img src="image.jpg" alt="example image">
</div>

這段範例中的 HTML 結構非常簡單，我們僅需要一個 div 作為容器，並在其中嵌入一張 img 圖片即可。

透過 CSS 的設置，我們能夠控制圖片的顯示方式。

圖片適應容器比例：overflow: hidden; 和 aspect-ratio

設定 overflow: hidden;

在 .card_img 容器上，我們設定了 overflow: hidden;。

這個屬性能夠限制子元素的顯示範圍，當子元素（在此為圖片）超出容器範圍時，超出部分將被隱藏。

這樣的設定有助於圖片以特定比例顯示，並且不會在容器外部露出多餘的部分。

.card_img {
    overflow: hidden;
}

設定 aspect-ratio: 200 / 150;

接著，在 .card_img 容器上設置 aspect-ratio: 200 / 150;，此屬性用於定義容器的寬高比。

當設置 aspect-ratio 時，容器會依照此比例自動調整高度。

由於這個屬性是加在容器 .card_img 上，所以容器的比例為 4:3（200/150 的比例），並且圖片會受限於此比例。

這裡選擇將 aspect-ratio 設在上層容器而非圖片本身，是因為 img 元素的寬高比例，通常是由其原始尺寸決定的。

若在圖片本身設定 aspect-ratio，無法達到我們希望的自動裁切效果。

因此，設定在上層容器可以確保圖片無論原本尺寸如何，均會符合容器的比例，並且透過 overflow: hidden; 隱藏超出部分。

.card_img {
    aspect-ratio: 200 / 150;
}

圖片置中顯示：position: absolute; 和 inset: 0;

使用 position: absolute; 將圖片絕對定位

在 .card_img img 中設置 position: absolute; 來達到絕對定位的效果，這樣圖片便會脫離標準文件流，而其位置會相對於 .card_img 容器進行定位。

這種設定使我們可以更靈活地，控制圖片在容器內的顯示位置。

.card_img img {
    position: absolute;
}

搭配 inset: 0; 使圖片置中

當圖片設定為 position: absolute; 後，透過 inset: 0; 可以快速將圖片在父層容器內進行置中。

inset: 0; 是 top: 0; left: 0; right: 0; bottom: 0; 的縮寫，意即將圖片的四個邊界都設置為 0，圖片將會自動在父層居中顯示。

搭配 margin: auto;，圖片能夠根據容器的比例進行調整並居中，不會受到其原始比例的影響。

.card_img img {
    inset: 0;
    margin: auto;
}

總結

透過上述代碼中的 CSS 設定，我們可以實現自動裁切、比例限制和置中顯示圖片的效果。

此過程中，關鍵在於使用 overflow: hidden; 和 aspect-ratio，讓容器擁有我們希望的顯示比例，並配合 position: absolute; 及 inset: 0;，使圖片在容器內完全置中，提供更專業且符合需求的圖片展示方式。

以上就是這段代碼的詳細解析，掌握這些 CSS 技巧，您也能輕鬆控制圖片的比例與顯示效果，適用於各種圖片展示需求。