如何在使用 CSS 調整大小時保持圖片縱橫比？

使用CSS 調整大小時保留影像比例：綜合指南

在Web 開發領域，通常需要調整影像大小以適應各種顯示要求。然而，保持影像的縱橫比以避免不必要的拉伸或扭曲至關重要。為了實現這一點，CSS 提供了一個優雅的解決方案。

物件適合：保持比例的關鍵

物件適合屬性控制如何替換元素的內容，例如影像或視頻，應調整大小以適合其容器。透過利用此屬性，我們可以指定如何在保留影像原始寬高比的同時調整影像大小。

填充元素時保留比例

用以下內容填充元素在保持比例的情況下，使用物件適合屬性的「cover」值。這告訴瀏覽器調整圖像大小以完全填充元素，同時裁剪邊緣多餘的內容以確保保持寬高比。

例如：

.cover {
  object-fit: cover;
  width: 150px;
  height: 100px;
}

<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/2OrtT.jpg" class="lazy" alt="如何在使用 CSS 調整大小時保持圖片縱橫比？" >

程式碼示範

在上面的範例中，cover類別使用了object-fit: cover屬性來確保影像會縮放以填滿寬度為150 像素、高度為100 像素的元素。儘管影像的原始尺寸（寬度為 242 像素，高度為 363 像素），但它會被縮放和裁剪以將其縱橫比保持在指定的元素大小內。

以上是如何在使用 CSS 調整大小時保持圖片縱橫比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！