如何在保持寬高比的同時調整 HTML 中的圖片大小？

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

處理影像時，保持其縱橫比以確保它們正確顯示至關重要。但是，在 HTML 中指定寬度和高度屬性通常會導致扭曲。

請考慮以下HTML 程式碼：

<img src="big_image.jpg" width="900" height="600" alt="" />

要在保留影像寬高比的同時調整影像大小，請套用下列CSS規則：

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

顯示：塊；屬性確保圖像的行為類似於塊元素，允許它填充其容器的寬度。 max-width 屬性設定影像的最大寬度，確保影像不會超過該寬度，同時保留其高度。

此 CSS 也適用於以下 HTML：

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.sstatic.net/aEEkn.png" />

使用這種方法，不同尺寸的圖像將按比例調整大小，保留其縱橫比，同時遵守指定的最大寬度。

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