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

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

初始嘗試：

最初，使用指定尺寸和自訂CSS 規則來調整大小影像，但未保持縱橫比：

img {
  max-width: 500px;
}

解決方案：

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

• display： block;：確保圖像可以在頁面內容內流動。
• max-width:230px;：設定影像的最大寬度image.
• max-height:95px;: 設定影像的最大高度。
• width: auto;: 允許影像自動填入 max-width 和 max 內的可用空間-height限制。
• height: auto;：根據影像固有方面自動調整高度ratio.

結果：

將這些CSS 規則應用到影像：

This image is originally 400x400 pixels, but should get resized by the CSS:

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

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