网站建设之设计CSS的宽高比单位

网站建设CSS工作组为CSS设计了宽高比单位。虽然这还没有在浏览器中，但本文将介绍设计新的大小调整方法的过程并解释它的工作原理。

CSS中一次又一次出现的事情之一就是没有办法根据宽高比来调整大小。特别是在使用响应式设计时，您通常希望能够将宽度设置为百分比，并使高度与某个宽高比相对应。这是负责设计CSS的人（即CSS工作组）最近一直在讨论的问题，并且最近在旧金山举行的CSSWG会议上商定了一个提议的解决方案。

这是一个新的解决方案，所以我们还没有浏览器实现，但我认为，如果更广泛的网络社区中的任何人都可以看到它的一个显示问题，那么编写提案是值得的。它还提供了对CSSWG工作的深入了解，以及如何讨论此类问题以及设计的新功能。

我们要解决的问题是什么？

关于未替换元素的问题，其没有固有的宽高比。替换元素是图像或放置<video>元素的视频之类的东西。它们与CSS中的其他框不同，因为它们具有设置尺寸和它们自己的行为。据说这些被替换的元件具有固有的纵横比，因为它们具有尺寸。

div或其他可能包含您的内容的HTML元素没有宽高比，您必须为其指定宽度和高度。没有办法说你想要保持16/9的宽高比，无论宽度是多少，都应该使用给定的宽高比来计算高度。

一种非常常见的情况是，您希望嵌入iframe以显示来自视频共享网站（如YouTube）的视频。如果您使用该<video>元素，则视频具有宽高比，就像图像一样。如果视频在其他地方并且您正在使用嵌入，则情况并非如此。您想要的是让您的视频做出响应，同时保持视频的正确宽高比。但是，如果将宽度设置为100％，则需要设置高度。您的视频最终被拉伸或挤压。

让我们看一下使用方形单元创建网格布局的一个非常简单的例子。如果我们使用固定的列轨道大小，那么很容易获得方形单元格，因为我们可以将行定义为与列轨道相同的大小。我们还可以使我们的行轨道自动调整大小，并设置项目并设置项目的高度。

当我们想要使用auto-fill和填充具有尽可能多的列轨道的容器时，问题就出现了。我们现在不能简单地给项目一个高度，因为我们不知道宽度是多少。我们的商品不再是正方形。

能够根据宽高比调整大小，这意味着我们可以在布置网格项后计算正确的宽高比。因此，使网格物品尽可能高，以便无论宽度如何，它们始终保持正方形。

当前宽高比解决方案

Web开发人员一直在以各种方式应对CSS缺乏任何宽高比 – 主要是“填充黑客”。此解决方案使用以下事实：块内方向上的填充％（因此，水平上下语言中的顶部和底部填充）是根据内联大小（宽度）计算的。

CSS-Tricks上的文章“ Aspect Ratio Boxes ”很好地概括了当前创建宽高比框的方法。填充黑客在许多情况下都可以工作，但是需要一堆箍来跳过才能让它运行良好。它也没有丝毫的直觉 – 即使你知道它为什么以及如何运作。这是我们想要在CSS工作组中尝试和解决的那些事情。就个人而言，我觉得我们越是获得优雅的CSS布局解决方案，杂乱的黑客就越突出我们应该解决的问题。

对于视频情况，您可以使用JavaScript。一个非常流行的解决方案是使用FitVids – 如CSS-Tricks文章中所述。使用JavaScript是一种合理的解决方案，但是需要加载更多脚本，还需要记住要做的其他事情。您不能简单地将视频存储到您的内容中，它只是有效。

建议的解决方案

我们正在寻找的是一种适用于常规块布局的通用解决方案（例如iframe中的视频或页面上的div）。如果项目是网格或弹性项目，它也应该工作。有一个不同的问题是希望网格轨道保持纵横比（让行轨道与列匹配），这个解决方案可以解决许多情况，但是，您可能需要它（您将从项目中工作而不是跟踪）。

该解决方案将成为CSS大小规范的一部分，并且正在CSS Sizing 4规范中编写。这是CSS工作组设计的新功能的第一步，讨论了这个想法，然后在规范中编写。此功能的初步建议被带到GROUP BY仁西蒙斯，你可以看到她的幻灯片甲板经过很多的这篇文章中讨论的用例在这里。

引入Sizing规范的新属性是aspect-ratio属性。此属性将接受一个宽高比值，例如16/9。例如，如果您想要一个宽度和高度相同的方框，您将使用以下内容：

.box {
  width: 400px;
  height: auto;
  aspect-ratio: 1/1;
}

对于16/9的盒子（例如视频）：

.box {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

对于网格布局中带有方形项目的示例，我们将网格轨道保留为自动调整大小，这意味着它们将从项目中获取其大小; 然后我们用aspect-ratio单位制作尺寸的物品。

.grid {
    display: grid;
    grid-template-columns: repeat(autofill, minmax(200px, 1fr));
}

.item {
    aspect-ratio: 1/1;
}