使用 CSS 在保持纵横比的同时调整图像大小

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

使用 CSS 在保持纵横比的同时调整图像大小

作者：迹忆客最近更新：2023/04/27 浏览次数：

这个简单的指南是关于在您的网站中设置图像，使其纵横比不会根据图像大小和需要适合的容器而受到干扰。首先，我们将查看 CSS 样式以了解这一点。

使用 CSS 将样式应用于网页

CSS 代表层叠样式表。级联意味着除非您为子元素指定不同的样式，否则应用于任何父元素的样式将自动由任何子元素继承。

有几种方法可以将 CSS 合并到您的网站中：

内联 CSS：将 style 属性与任何 HTML 元素一起使用并将任何样式属性专门应用于该元素称为内联 CSS。
内部样式表：如果您只想将样式应用于网站的一个页面，请使用内部 CSS。因此，将该页面的样式属性包含在 HTML 页面的 <head> 部分内的 <style> 标记中。
外部样式表：所有网站页面都可以使用外部 CSS 对其应用样式。因此，您创建了一个包含各种选择器类型和样式属性的样式表，并将其包含在您网站的所有网页中。

CSS 中有许多与图像相关的属性。这些属性调整您网站上的图像大小、颜色、位置等。

当我们将图像放在我们网站上的某个容器中时，就像任何 div 元素一样，它的大小取决于图像的大小。这有时会产生问题，因为有些图像较大，有些图像较小；为了设置此类图像，我们设置了它们的纵横比。

使用 CSS 设置图像纵横比

元素的宽度和高度之间的比例称为其纵横比。通用视频格式为 4:3，两种常见的视频宽高比为 16:9 和 3:2（高清电视和数字电视通用）。

设置纵横比的语法如下：

aspect-ratio: auto || <ratio>;

要么将其设置为默认值，即自动，要么给出一些宽高比。以下是可能的值及其含义：

宽高比	说明
aspect-ratio: auto;	这是默认值。
aspect-ratio: 1 / 1;	宽度和高度的比例相等。
aspect-ratio: 2 / 1;	图像的宽度是其高度的两倍。
aspect-ratio: 1 / 2;	图像的宽度是其高度的一半。
aspect-ratio: 16 / 9;	这是视频常用的比例。
aspect-ratio: 0.5;	该比率也可以使用浮点值指定。
aspect-ratio: inherit;	它继承了其父元素的纵横比。
aspect-ratio：initial;	这等于默认值 auto。
aspect-ratio：unset;	它从元素中删除所有纵横比。

考虑一个示例，我们将在其中放置图像并设置其纵横比：

<html>
<head>
   <style>
       .images{
            aspect-ratio: auto;
            width: 400px;
        }
    </style>
</head>
<body>
    <h2>Aspect Ratio auto </h2>
    <img src="/img/jiyik/logo.png" class = "images"/>

</body>
</html>

在此代码段中，我们放置了一个图像并为其分配了一个类选择器 images。此类是一个 CSS 类，其中我们将宽高比设置为自动并将其宽度指定为 400px。

对于 auto 值，高度将根据图像的大小自动调整。

现在，我们将像这样更改纵横比：

.images{
    aspect-ratio: 2 / 1;
    width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/jiyik/logo.png" class = "images"/>

输出将是这样的：

在此输出屏幕中，您可以看到图像的高度是其宽度的一半。现在我们将使用 1 / 2 的比例，使高度是宽度的两倍。

.images{
    aspect-ratio: 1 / 2;
    width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/jiyik/logo.png" class = "images"/>

使用 CSS 调整图像大小同时保持相同的纵横比

我们可以使用 CSS 调整图像大小，同时保持纵横比不变。例如，考虑以下尺寸为 428x428 像素的图像：

实际大小的图像

我们可以使用 CSS 调整上面图像的大小，同时保持其纵横比。考虑以下示例：

.images {
            display: block;
            max-width:250px;
            max-height:90px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/jiyik/logo.png" class = "images"/>

我们在此代码段中使用 CSS 类选择器图像。此类将图像大小调整为 250x90px，而不改变其纵横比。

通过这种方法，我们可以根据自己网页的需要和要求来设置纵横比。

我们还可以更改具有相同纵横比的图像。这样做主要是为了让网站响应所有显示尺寸。

上一篇：使用 CSS 旋转文本

下一篇：CSS 在图像周围环绕文本

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：