如何在保持寬高比的同時使圖像適合 Div？

在Div 中調整圖像時保留寬高比

在進行網頁設計時，常見的任務是將圖像調整到Div 中div 同時保持其縱橫比。這可確保影像不會扭曲並保留其預期比例。要在 HTML 和 CSS 中實現此目的，我們可以使用以下程式碼：

.my-div {
   width: 48px;
   height: 48px;
   overflow: hidden;
}

.my-img {
   max-height: 100%;
   max-width: 100%;
}

在 CSS 內，我們為具有固定寬度和高度的 div (my-div) 定義一個類別。將overflow 屬性設為hidden 以隱藏任何超出div 邊界的圖片內容。

在div 內，定義了一個影像類別(my-img)。這裡的技巧在於將 max-height 和 max-width 設定為 100%。這使得影像能夠完全佔據 div 內的空間，同時保持其自身的寬高比。如果沒有這些規則，圖像將拉伸或擠壓以適應 div 的尺寸，從而導致扭曲。

透過實作此程式碼，您可以成功地在 div 中適應映像，同時保留其縱橫比。此技術對於確保在各種螢幕尺寸和裝置上顯示響應式影像特別有用。

以上是如何在保持寬高比的同時使圖像適合 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！