在保持宽高比的同时强制调整图像大小

处理图像时，通常需要将图像大小调整为特定尺寸。但是，保留纵横比可确保图像不会出现扭曲或拉伸。

初始尝试：

最初，使用指定尺寸和自定义 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;
}

生成的图像在指定的最大尺寸内调整大小，同时保持其原始宽高比。