在 CSS 中调整图像大小

Sushant Poudel 2023年2月20日 2021年10月2日
  1. 在 CSS 中使用 max-widthmax-height 属性调整图像大小
  2. 在 CSS 中使用 object-fit 属性调整图像大小
  3. 在 CSS 中使用 auto 宽度值和 max-height 属性调整图像大小
在 CSS 中调整图像大小

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

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

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

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

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

示例代码:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>
img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

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

我们可以使用 CSS 中的 object-fit 属性来调整图像大小以适合其容器。容器的大小可能比图像大或小。该属性让我们可以根据容器的大小来适应图像或视频。我们可以使用 object-fit 属性指定图像的拟合方式。该属性采用 fillcontaincovernonescale-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 的高度和宽度。我们已将容器的高度设置为 200pxmax-height 属性设置为 100% 会将图像缩小到 200px。因此,我们根据容器的高度调整了图像的高度。

示例代码:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>
.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

相关文章 - CSS Image