如何在保持縱橫比的同時強制調整 CSS 中的圖片大小？

在強制調整影像大小時保留寬高比

在Web 開發中處理影像時，保持原始寬高比至關重要，以防止失真。預設情況下，使用寬度和高度等 CSS 屬性縮放圖片可能會改變其寬高比。

解決問題

要解決此問題，可以採用 CSS 規則強制調整大小，同時保持縱橫比。以下程式碼片段實現了此功能：

img {
  display: block;
  max-width: 500px;
  width: auto; 
  height: auto;
}

display: block;屬性確保圖像的行為類似於區塊元素，佔據整個可用寬度。最大寬度：500px；設定影像的最大寬度，確保其不超過 500 像素。

至關重要的是，width: auto;和高度：自動；允許影像自動調整其尺寸，同時保持其縱橫比。這意味著圖像將調整大小以適合指定的最大寬度，而不會扭曲其高度或導致任何拉伸或擠壓。

範例用法

考慮以下程式碼：

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="如何在保持縱橫比的同時強制調整 CSS 中的圖片大小？" >

將CSS 規則套用於此影像將強制其在指定的最大寬度內調整大小，同時保留它的長寬比。

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