如何在將圖像放入 Div 時保持寬高比？

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

在受限空間內顯示影像時，通常希望在不影響其寬高比的情況下調整圖像。 HTML 和 CSS 提供了一個優雅的解決方案來實現此目的。

方法

保持圖片長寬比的關鍵是利用 max-height 和 max-width CSS 屬性。實作方法如下：

1. 設定div高度和寬度：決定包含影像的div所需的高度和寬度。

2. 應用圖像max-height 和max-width:

   • max-height: 100%;: 確保影像高度不超過div 的高度。
   • max-width: 100%;: 防止影像寬度溢位 div 的寬度。

這樣做，影像將在 div 內縮小或擴展邊界，同時保留其寬高比。

範例

考慮以下HTML 和CSS 程式碼：

<div>

在此範例中，圖片「my-image.jpg」將動態調整其大小以適合48x48 div，保持其原始比例。

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