在图像和其他响应式元素的宽度和高度之间有一个一致的比例是很重要的。在CSS中，我们使用padding hack已经很多年了，但现在我们在CSS中有了原生的长宽比支持。
在这篇文章中，我们将讨论什么是宽高比，我们过去是怎么做的，新的做法是什么。当然，也会有一些用例，对它们进行适当的回退。
什么是高宽比
根据维基百科的说法：
在数学上，比率表示一个数字包含另一个数字的多少倍。例如，如果一碗水果中有八个橙子和六个柠檬，那么橙子和柠檬的比例是八比六(即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.github.io/nearest-aspect-ratio/
在 CSS 中实现宽高比
我们过去是通过在CSS中使用百分比padding 来实现宽高比的。好消息是，最近，我们在所有主要的浏览器中都得到了aspect-ratio的原生支持。在深入了解原生方式之前，我们先首先解释一下好的老方法。
当一个元素有一个垂直百分比的padding时，它将基于它的父级宽度。请看下图。
当有padding-top: 50%时，该值是根据其父元素的宽度来计
- Percentage padding = height / width
算的。因为父元素的宽度是200px，所以padding-top会变成100px。
为了找出要使用的百分比值，我们需要将图像的高度除以宽度。得到的数字就是我们要使用的百分比。
假设图像宽度为260px，高度为195px。
- Percentage padding = height / width
195/260的结果为 0.75(或75%)。
我们假设有一个卡片的网格，每张卡片都有一个缩略图。这些缩略图的宽度和高度应该是相等的。
由于某些原因，运营上传了一张与其他图片大小不一致的图片。注意到中间那张卡的高度与其他卡的高度不一样。
你可能会想，这还不容易解决?我们可以给图片加个object-fit: cover。问题解决了，对吗?不是这么简单滴。这个解决方案在多种视口尺寸下都不会好看。
注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。
我们需要的是，无论视口大小如何，缩略图的尺寸都要一致。为了实现这一点，我们需要使用百分比padding来实现一个宽高比。
HTML
"card"> -
"card__thumb" > - "thumb.jpg" alt="" />
-
