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

在調整影像大小期間保留縱橫比

影像縱橫比對於在調整大小時保持影像的原始比例至關重要。當圖像具有預先定義的寬度和高度屬性並應用其他 CSS 規則時，此問題變得明顯。

例如，在下面提供的程式碼中，圖片「big_image.jpg」的高度和寬度明確定義為600和900 像素，分別：

<img src="/static/imghwm/default1.png" data-src="big_image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="">

要在保持寬高比的同時強制調整影像大小，可以採用CSS 規則。在這種情況下，可以使用以下 CSS 規則：

img {
    max-width: 500px;
}

但是，此 CSS 規則可能無法將圖片縮小到適當的大小。為了解決這個問題，應該使用額外的 CSS 屬性：

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

使用這些 CSS 屬性，圖片「big_image.jpg」會調整大小，同時保留其縱橫比。這透過以下 HTML 和 CSS 程式碼進行說明：

<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 調整大小時保持圖片長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！