什么是高宽比？CSS中如何实现宽高比？

图像和响应式元素的宽高间有一个一致的比例是很重要的，下面文章带大家了解一下高宽比，aspect-ratio属性，通过示例详细介绍一下 css 中实现宽高比的方法。 什么是高宽比 根据维基百科的说法： 在数学上，比率表示一个数字包含另一个数字的多少倍。例如，如果一碗水果中有八个橙子和六个柠檬，那么橙子和柠檬的比例是八比六（即8∶6，相当于比值4∶3）。 在网页设计中，高宽比的概念是用来描述图像的宽度和高度应按比例调整。 立即学习 “ 前端免费学习笔记（深入） ”； 考虑下图 比率是4:3，这表明苹果和葡萄的比例是 。 换句话说，我们可以为宽高比为4：3的最小框是 框。 当此盒式高度按比例调整为其宽度时，我们将有一个致宽尺寸的框。 考虑下图。 盒子被按比例调整大小，其宽度和高度之间的比例是一致的。现在，让我们想象一下，这个盒子里有一张重要的图片，我们关心它的所有细节。 请注意，无论大小如何，图像细节都被保留。通过拥有一致的高宽比，我们可以获得以下好处 整个网站的图像将在不同的视口大小上保持一致。 我们也可以有响应式的视频元素。 它有助于设计师创建一个图像大小的清晰指南，这样开发者就可以在开发过程中处理它们。 计算宽高比 为了测量宽高比，我们需要将宽度除以如下图所示的高度。 宽度和高度之间的比例是1.33。这意味着这个比例应该得到遵守。请考虑 注意右边的图片，宽度÷高度的值是 1.02 ，这不是原来的长宽比（1.33或4：3）。 你可能在想，如何得出4:3这个数值？嗯，这被称为最接近的正常长宽比，有一些工具可以帮助我们找到它。在进行UI设计时，强烈建议你确切地知道你所使用的图像的宽高比是多少。使用这个网址可以帮我们快速计算。 网址地址：http://lawlesscreation.github.io/nearest-aspect-ratio/ 在 CSS 中实现宽高比 我们过去是通过在CSS中使用百分比 来实现宽高比的。好消息是，最近，我们在所有主要的浏览器中都得到了 的原生支持。在深入了解原生方式之前，我们先首先解释一下好的老方法。 当一个元素有一个垂直百分比的 时，它将基于它的父级宽度。请看下图。 当标题有 时，该值是根据其父元素的宽度来计算的。因为父元素的宽度是 ，所以 会变成 。 为了找出要使用的百分比值，我们需要将图像的高度除以宽度。得到的数字就是我们要使用的百分比。 假设图像宽度为 ，高度为 。 的结果为 （或 ）。 我们假设有一个卡片的网格，每张卡片都有一个缩略图。这些缩略图的宽度和高度应该是相等的。 由于某些原因，运营上传了一张与其他图片大小不一致的图片。注意到中间那张卡的高度与其他卡的高度不一样。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 你可能会想，这还不容易解决？我们可以给图片加个 。问题解决了，对吗？不是这么简单滴。这个解决方案在多种视口尺寸下都不会好看。 注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。 我们需要的是，无论视口大小如何，缩略图的尺寸都要一致。为了实现这一点，我们需要使用百分比 来实现一个宽高比。 HTML CSS 通过上述，我们定义了卡片缩略图包装器（ ）的高度取决于其宽度。另外，图片是绝对定位的，它有它的父元素的全部宽度和高度，有 ，用于上传不同大小的图片的情况。请看下面的动图。 请注意，卡片大小的变化和缩略图的长宽比没有受到影响。 aspect-ratio 属性 今年早些时候，Chrome、Safari TP和Firefox Nightly都支持 CSS 属性。最近，它在Safari 15的官方版本中得到支持。 我们回到前面的例子，我们可以这样改写它。 请看下面的动图，了解宽高比是如何变化的。 Demo 地址：https://codepen.io/shadeed/pen/ZEeMjZe 有了这个，让我们探索原始纵横比可以有用的一些用例，以及如何以逐步增强的方法使用它。 渐进增强 我们可以通过使用CSS 和CSS变量来使用CSS 。 Logo Images 来看看下面的 logo 你是否注意到它们的尺寸是一致的，而且它们是对齐的？来看看幕后的情况。 我添加了一个 的基本宽度，以便有一个最小的尺寸，而 会照顾到高度。 蓝色区域是图像的大小， 是重要的，避免扭曲图像。 Responsive Circles 你是否曾经需要创建一个应该是响应式的圆形元素？CSS 是这种使用情况的最佳选择。 如果宽高比的两个值相同，我们可以写成 而不是 。如果你使用 或 ，宽度将是可选的，它可以被添加作为一个最小值。 原文地址：https://ishadeed.com/article/css-aspect-ratio/ 作者：Ahmad Shadeed 更多编程相关知识，请访问： 编程视频 ！！