如何在保持寬高比的同時使影像緊貼在 Div 內？

保持Div 內影像的長寬比

問題：

如何將影像緊貼在div 內元素，同時保留其縱橫比，確保影像的任何部分都不會被裁剪或扭曲？

答案：

要使用CSS 實現此目的，請利用以下屬性：

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

1. max-max : 100%;: 設定影像最大高度為100%它的容器div。這可以確保圖像不會溢出 div 的高度。
2. max-width: 100%;：與 max-height 類似，但針對寬度。這會將影像的最大寬度設定為其容器 div 的 100%。

說明：

透過組合這兩個屬性，影像將有效收縮以適應 div，同時保持其原始縱橫比。影像將按比例縮小，確保沒有任何部分被裁剪或扭曲。

附加說明：

1. 如果您想要圖片在div 內居中，新增下列CSS屬性：

img {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 或者，您可以使用object-fit屬性來實現類似的結果，儘管並非所有瀏覽器都支援它。

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