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

在保持寬高比的同時強制調整影像大小

處理影像時，通常需要將影像大小調整為特定尺寸。但是，保留縱橫比可確保影像不會出現扭曲或拉伸。

初始嘗試：

最初，使用指定的尺寸和自訂 CSS規則來調整大小影像，但縱橫比不是維護：

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

img {
  max-width: 500px;
}

解決方案：

要在保持寬高比的同時強制調整影像大小，可以使用下列CSS 屬性：

• display: block;:確保影像可以在頁面內流動content.
• max-width:230px;: 設定影像的最大寬度。
• max-height:95px;: 設定影像的最大高度。
• width: auto;：允許影像自動填滿最大寬度和最大高度約束內的可用空間。
• 高度： auto;：根據影像固有的寬高比自動調整高度。

結果：

將這些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 調整圖片大小，同時保持縱橫比？" >

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

產生的影像在指定的最大尺寸內調整大小，同時保持其原始外觀比例。

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