作者：AhmadShadeed译者：前端小智来源：shaeded有梦想，有干货，微信搜索【大千世界】追踪这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。在图像和其他响应元素的宽度和高度之间保持一致的比例很重要。在CSS中，我们多年来一直使用paddinghacks，但现在我们在CSS中有了原生纵横比支持。在本文中，我们将讨论纵横比是什么、我们过去是如何做到的以及新增功能。当然，也会有一些用例，回退是合适的。什么是纵横比？根据维基百科：在数学中，比率表示一个数字包含另一个数字的次数。例如，一碗水果中有八个橙子和六个柠檬，那么橙子和柠檬的比例就是八比六（即8：6，相当于4：3的比例）。在网页设计中，宽高比的概念用来描述图像的宽度和高度应该如何按比例调整。考虑下图中4:3的比例，这表明苹果和葡萄的比例是4:3。换句话说，我们可以为4:3的宽高比制作的最小盒子是4px*3px的盒子。当这个盒子的高度与其宽度成比例时，我们将得到一个加宽的盒子。考虑下图。框按比例调整大小，其宽度和高度之间的比例保持一致。现在，假设这个盒子里有一张重要的图片，我们关心它的所有细节。请注意，无论大小如何，图像细节都会被保留。通过保持一致的纵横比，我们获得了以下好处：整个站点的图像在不同视口尺寸下将保持一致。我们也可以有响应式视频元素。它可以帮助设计人员为图像大小创建明确的指南，以便开发人员可以在开发过程中处理它们。计算纵横比为了测量纵横比，我们需要将宽度除以高度，如下图所示。宽度和高度之比为1.33。这意味着应该尊重这个比例。考虑右边的图像，其中宽度÷高度值为1.02，这不是原始纵横比（1.33或4:3）。您可能想知道，您是如何得出4:3的值的？好吧，这被称为最接近的正常纵横比，并且有一些工具可以帮助我们找到它。在进行UI设计时，强烈建议您准确了解所用图像的宽高比。使用这个URL可以帮助我们快速计算。URL地址：http://lawlesscreation.github...在CSS中实现纵横比我们以前在CSS中使用percentagepadding来实现纵横比。好消息是，最近，我们在所有主要浏览器中都对纵横比提供了原生支持。在深入探讨原生方式之前，让我们先解释一下旧的方式。当元素具有垂直百分比填充时，它将基于其父元素的宽度。请看下图。当标题有padding-top:50%时，该值是根据其父元素的宽度计算的。因为父元素的宽度是200px，所以padding-top会变成100px。要找出要使用的百分比值，我们需要将图像的高度除以其宽度。结果数字是我们将使用的百分比。假设图像的宽度为260像素，高度为195像素。填充百分比=高度/宽度195/260结果为0.75（或75%）。假设我们有一个卡片网格，每张卡片都有一个缩略图。这些缩略图的宽度和高度应该相等。由于某种原因，运营商上传了一张与其他图片尺寸不一样的图片。请注意，中间卡片与其他卡片的高度不同。你可能会想，这不是很容易修复吗？我们可以给图片加上一个object-fit:cover。问题解决了吧？没那么简单。此解决方案在多个视口尺寸上看起来不太好。请注意，在中等尺寸的情况下，固定高度的图像从左侧和右侧裁剪得太多，而在移动设备上它们太宽了。这一切都是由于使用了固定高度。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。我们需要的是无论视口大小如何，缩略图都具有相同的大小。为此，我们需要使用百分比填充来实现纵横比。HTML
