迹忆客 专注技术分享

本文介绍了在 CSS 中调整图像大小以按比例适应 div 并保持其高度和宽度的方法。

在 CSS 中使用 max-width 和 max-height 属性调整图像大小

每当我们在 HTML 中插入图像时，图像会占据其大小的总像素。如果图像在特定容器内，有时图像的大小可能大于容器的大小。图像将在屏幕上覆盖更多空间；它将从其他元素中获取区域。结果，网页将不会遵循我们的设计，并且没有吸引力。为了解决这个问题，我们可以使用 max-width 和 max-height CSS 属性根据容器的大小自动调整图像大小。这些属性设置元素的最大高度和宽度。如果元素中的内容的宽度和高度大于 max-width 和 max-height 属性，它们的大小将根据这些属性的值进行调整。但是，如果它们的尺寸很小，则不会产生任何影响。我们可以为一个元素设置 max-height 和 max-width 属性，这样，容器内的元素就会调整它们的大小。

例如，在 HTML 中创建一个类为 cat 的 div。在 div 内使用 <img> 标签插入图像。在 CSS 中，选择 img 标签并将属性 max-width 和 max-height 分配给 100%。然后，选择 cat 类并指定 200px 和 200px 的 height 和 width。

在下面的示例中，我们从 LoremFlickr 插入了一个随机图像，它具有 300px 的 width 和 height。但是，容器 cat 的高度和宽度为 200px。当我们使用 max-height 和 max-width 属性时，较大的图像会缩小到容器的大小。因此，我们自动调整了图像的大小。

示例代码：

<div class="cat">
    <img src="/img/Jiyik/logo.png" alt="迹忆客 Logo" />
</div>

img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

在 CSS 中使用 object-fit 属性调整图像大小

我们可以使用 CSS 中的 object-fit 属性来调整图像大小以适合其容器。容器的大小可能比图像大或小。该属性让我们可以根据容器的大小来适应图像或视频。我们可以使用 object-fit 属性指定图像的拟合方式。该属性采用 fill、contain、cover、none 和 scale-down 等值。我们可以使用 contain 值，以便较大的图像可以缩小到容器的给定尺寸。

例如，使用 img 标签插入 600px 高度和宽度的图像，如第一个示例所示。在 CSS 中，选择标签并将高度和宽度设置为 100%。在 object-fit 选项中使用 contain 值。然后，选择 cat 类并为容器提供 300px 的高度和宽度。

在这里，我们插入了尺寸大于容器尺寸的图像。图像是 600px，而容器只有 300px。使用 object-fit 属性，我们可以将图像缩小到容器的尺寸。因此，我们可以自动调整图像大小。

示例代码：

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat {
 height:300px;
 width: 300px;
}

在 CSS 中使用 auto 宽度值和 max-height 属性调整图像大小

我们可以使用 auto 值作为宽度并设置 max-height 属性来指定图像的宽度以适合容器。我们将图像的高度缩小到容器的高度。例如，在 HTML 中插入如上的图像，并在 CSS 中将容器的高度设置为 200px。接下来，选择 img 标签，将宽度设置为 auto，并将 max-height 属性设置为 100%。

在下面的示例中，图像最初具有 400px 的高度和宽度。我们已将容器的高度设置为 200px。max-height 属性设置为 100% 会将图像缩小到 200px。因此，我们根据容器的高度调整了图像的高度。

示例代码：

<div class="cat">
    <img src="/img/Jiyik/logo.png" alt="迹忆客 Logo" />
</div>

.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}