如何在 CSS 中更改图像大小？

有时，需要将图像适应指定的尺寸。可以通过设置图像的宽度和高度来调整图像大小。一种常见的解决方案是使用 max-width: 100%; 和 height: auto;，这样较大的图像就不会超出其容器的宽度。max-width 和 max-height 属性的 CSS 工作效果更好，但许多浏览器不支持它们。

调整图像大小的另一种方法是使用 object-fit 属性，该属性用于适应图像。此 CSS 属性指定视频或图像如何调整大小以适应其内容框。它定义了元素如何适应具有已建立的宽度和高度的容器。

object-fit 属性通常应用于图像或视频。此属性定义了元素如何响应其容器的宽度和高度。主要有 five values of object-fit 属性，如 fill, contain, cover, none, scale-down, initial 和 inherit。此属性的默认值为 "fill"。

示例

在此示例中，我们使用 max-width: 100%; 和 height: auto; 属性来调整图像大小。

输出

示例

在此示例中，我们使用 object-fit: cover; 属性。

输出

在上面的示例中，我们使用了 object-fit 属性的 cover 值。与上面的示例类似，我们可以使用 object-fit 属性的其他值来调整图像大小。