什么是高宽比
根据维基 百科 的说法：
在数学上，比率表示一个数字包含另一个数字的多少倍。例如，如果一碗水果中有八个橙子和六个柠檬，那么橙子和柠檬的比例是八比六（即8∶6，相当于比值4∶3）。
在网页设计中，高宽比的概念是用来描述图像的宽度和高度应按比例 调整 。
考虑下图
比率是4:3，这 表明 苹果 和葡萄的比例是 4:3 。
换句话说，我们可以为宽高比为4：3的最小框是 4px * 3px 框。 当此盒式高度按比例调整为其宽度时，我们将有一个致宽 尺寸 的框。
考虑下图。
盒子 被按比例调整大小，其宽度和高度之间的比例是一致的。现在，让我们想象一下，这个盒子里有一张重要的图片，我们关心它的所有 细节 。
请注意，无论大小如何，图像细节都被保留。通过拥有一致的高宽比，我们可以获得以下好处
整个网站的图像将在不同的视口大小上保持一致。 我们也可以有响应式的视频元素。 它有助于设计师创建一个图像大小的清晰指南，这样 开发者 就可以在开发 过程中 处理它们。计算宽高比
为了测量宽高比，我们需要将宽度除以如下图所示的高度。
宽度和高度之间的比例是1.33。这意味着这个比例 应该 得到遵守。请考虑
注意 右边 的图片，宽度÷高度的值是 1.02 ，这不是 原来 的长宽比（1.33或4：3）。
你可能在想，如何得出4:3这个数值？嗯，这被称为最接近的 正常 长宽比，有一些工具可以帮助我们找到它。在进行UI设计时，强烈建议你确切地 知道 你所使用的图像的宽高比是多少。使用这个网址可以帮我们快速计算。
网址地址：http://lawlesscreation.g IT h ub .io/nearest-aspect-ratio/
在 CSS 中实现宽高比
我们过去是通过在CSS中使用百分比 padding 来实现宽高比的。好消息是，最近，我们在所有主要的浏览器中都得到了 aspect-ratio 的原生支持。在深入了解原生方式之前，我们先首先解释一下好的老方法。
当一个元素有一个垂直百分比的 padding 时，它将基于它的父级宽度。请看下图。
当标题有 padding -t op: 50% 时，该值是根据其父元素的宽度来计算的。因为父元素的宽度是 200px ，所以 padding-top 会变成 100px 。
为了找出要使用的百分比值，我们需要将图像的高度除以宽度。得到的数字就是我们要使用的百分比。
假设图像宽度为 260px ，高度为 195px 。
Percentage padding = h ei ght / width
195/260 的结果为 0.75 （或 75％ ）。
我们假设有一个卡片的网格，每张卡片都有一个缩略图。这些缩略图的宽度和高度应该是相等的。
由于某些 原因 ， 运营 上传了一张与其他图片大小不一致的图片。注意到中间那张卡的高度与其他卡的高度不一样。
你可能会想，这还不容易解决？我们可以给图片加个 object-fit: cover 。问题解决了，对吗？不是这么 简单 滴。这个解决 方案 在多种视口尺寸下都不会好看。
注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的 媒体查询 手动调整高度，但这不是一个实用的解决方案。
我们需要的是，无论视口大小如何，缩略图的尺寸都要一致。为了实现这 一点 ，我们需要使用百分比 padding 来实现一个宽高比。
HT ML
<article class="card">
<div class="card__thumb">
< img src="thumb. jpg " alt="" />
</div>
<div class="card__content">
<h3> ;m uffins Recipe</h3>
<p>Servings: 3</p>
</div>
</article>CSS
.card__thumb {
position: relative;
padding-top: 75%;
}
.card__thumb img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}通过上述，我们定义了卡片缩略图包装器（ .card__thumb ）的高度取决于其宽度。另外，图片是绝对定位的，它有它的父元素的全部宽度和高度，有 object-fit: cover ，用于上传不同大小的图片的情况。请看下面的动图。
请注意，卡片大小的变化和缩略图的长宽比没有受到影响。
aspect-ratio 属性
今年早些时候，Ch rom e、Safari TP和Firefox Nightly都支持 aspect-ratio CSS 属性。最近，它在Safari 15的 官方 版本中得到支持。
我们回到前面的例子，我们可以这样改写它。
/* 上面的方式 */
.card__thumb {
position: relative;
padding-top: 75%;
}
/* 使用 aspect-ratio 属性 */
.card__thumb {
position: relative;
aspect-ratio: 4/3;
}请看下面的动图，了解宽高比是如何变化的。
Demo 地址：https://codepen.io/shadeed/pen/ZEeMjZe
有了这个，让我们 探索 原始纵横比可以有用的一些用例，以及如何以 逐步 增强的方法使用它。
渐进增强
我们可以通过使用CSS @supports 和 CSS变量 来使用CSS aspect-ratio 。
.card {
--aspect-ratio: 16/9;
padding-top: calc((1 / ( VAR (--aspect-ratio))) * 100%);
}
@supports (aspect-ratio: 1) {
.card {
aspect-ratio: var(--aspect-ratio);
padding-top: initial;
}
}LOG o Images
来看看下面的 logo
你 是否 注意到它们的尺寸是一致的，而且它们是对齐的？来看看幕后的情况。
// html
<li class=" br ands__item">
<a hr ef=" # ">
<img src="assets/batch-2/aanaab.png" alt="" />
</a>
</li>.brands__item a {
padding: 1rem;
}
.brands__item img {
width: 130px;
object-fit: cont ai n;
aspect-ratio: 2/1;
}我添加了一个 130px 的基本宽度，以便有一个最小的尺寸，而 aspect-ratio 会照顾到高度。
蓝色区域是图像的大小， object-fit: contain 是重要的，避免扭曲图像。
Responsive Circles
你是否曾经需要创建一个应该是响应式的 圆 形元素？CSS aspect-ratio 是这种使用情况的最佳选择。
.person {
width: 180px;
aspect-ratio: 1;
}如果宽高比的两个值相同，我们可以写成 aspect-ratio: 1 而不是 aspect-ratio: 1/1 。如果你使用 flexbox 或 grid ，宽度将是可选的，它可以被添加作为一个 最小值 。
原文地址：https://ishadeed .COM /article/css-aspect-ratio/
作者：Ahmad Shadeed
更多编程相关知识，请访问：编程视频！！
以上就 是什么 是高宽比？CSS中如何实现宽高比？的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 什么是高宽比？CSS中如何实现宽高比？ 全部内容，希望文章能够帮你解决 什么是高宽比？CSS中如何实现宽高比？ 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于什么是高宽比？CSS中如何实现宽高比？的详细内容...