使用 CSS 按比例调整图像大小

resize image 属性用于响应式 Web，其中图像会自动调整大小以适合 div 容器。 CSS 中的 max-width 属性用于创建调整图像大小的属性。如果 HTML 中定义了图像的宽度和高度，则 resize 属性将不起作用。

句法：

img {
    max-width:100%;
    height:auto;
}

如果需要，也可以使用 Width 代替 max-width。关键是使用 height:auto 覆盖图像上已经存在的任何 height=”…” 属性。
CSS 属性 max-width 和 max-height 效果很好，但很多浏览器都不支持。

示例 1：

输出：

一个常见的用法是设置 max-width: 100%;高度：自动；所以大图像不会超过它们的容器宽度。另一种方法是使用 object-fit 属性，这将适合图像，而不会改变比例。

示例 2：

输出：