石家庄网页设计：设计CSS的宽高比单位

2019.08.13 mf_web

192

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;}

复制

在浏览器开始实现它们之前，功能通常会经历各种迭代。之前已经讨论过对纵横比单元的需求，这次我们考虑了该提案的一个特别关注点。

如果指定宽高比框，但随后向框中添加了太多内容会发生什么？CSS-Tricks关于填充黑客攻击的文章提出了同样的问题 - 修复它需要同样不直观的解决方案。

处理溢出

我们在这里处理的是溢出，就像网络上的情况一样。我们希望有一个漂亮的大小盒子：我们的设计要求一个漂亮的大小盒子，我们的内容表现不佳，结果比我们预期的要大，并且开箱即用。除了指定我们如何在一个维度中请求宽高比之外，我们还必须指定如果内容太多会发生什么，以及Web开发人员如何告诉浏览器如何处理该溢出内容。

我们使用CSS中的一般设计原则以避免数据丢失。CSS上下文中的数据丢失是您的某些内容消失的地方。这可能是因为它从视口一侧被戳戳，或者在它溢出时被裁剪。通常最好有一个凌乱的溢出（因为你会注意到并做一些事情）。如果我们让某些东西消失，你甚至可能都没有意识到它，特别是如果它只发生在一个断点处。

我们在网格布局中有一个类似的问题，它很好地修复minmax()了轨道大小的功能。您可以使用长度单位定义具有固定高度的网格轨迹。这将为您提供一个可爱的整齐网格框，但是，只要有人在其中一个框中添加了比您预期更多的内容，您就会溢出。

网格布局中的此修复方法是minmax()用于轨道大小，并设置最大值auto。在这种情况下，auto可以被认为“足够大以适应内容”。你得到的是一组整洁的盒子，如果比预期更多的内容进入，就会成长为接受这些内容。（无比凌乱的溢出或裁剪内容更好。）

在下面的示例中，您可以看到，当包含额外内容的框的第一行增长时，第二行的大小为100像素。

我们的纵横比框需要类似的东西，而且结果相对简单。如果您不对溢出执行任何操作，则默认行为将是允许内容增长超过由宽高比推断的高度。这将为您提供与网格轨道大小相同的行为minmax()。在高度的情况下，它将至少是由纵横比限定的高度，即如果内容物更高，则高度可以增长以适合它。

如果您不想这样，那么您可以像通常那样更改溢出值。例如，隐藏溢出或允许它滚动。