1. 首页
  2. css

为CSS设计宽高比单元

Rachel Andrew说,CSS工作组在最近的一次会议上设计了一个长宽比单元。我们的想法是找到一个优雅的解决方案,当我们希望根据元素的宽度计算元素的高度时,反之亦然。

例如,我们有一个网格布局,其中一行元素应保持一个正方形(1:1)的比例。我们可以采用一些现有但不太理想的方法:

  • 定义一个显式维度。如果我们定义网格中项目的高度,但在模板列上使用一个固有值(例如,auto-fill),那么当容器响应浏览器视口时,我们就不再知道元素的宽度。元素会增长和挤压,但永远不会保持完美的正方形。
  • 定义明确的尺寸。当然,我们可以告诉元素200像素宽和200像素高,但是当添加到项目中的内容超过空间时会发生什么?现在我们有一个溢出问题。
  • 使用padding hack。元素的块级别(从上到下)填充百分比由元素的内联宽度计算,我们可以用它来计算高度。但是,正如瑞秋所说,这是完全不直观和难以维护的。
    • 克里斯写了一个完整的可能的方法来保持长宽比,但没有一个是优雅的CSS工作组提出的解决方案:

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

      看到了吗?具有纵横比单位的aspect-ratio属性将基于width属性的值来计算元素的高度。

      或者,对于列设置为auto-fill的网格布局:

      .grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}.item {aspect-ratio: 1/1;}

      非常酷!但这项提议将何去何从呢?aspect-ratio包含在CSS尺寸4规范的草稿中。如果您有想法或建议,请在CSSWG GitHub repo中创建一个问题。或者,就像瑞秋建议的那样,评论一下她那篇轰动一时的杂志文章,甚至写下你自己的文章,一起发出去。这是一个为可能的新功能添加声音的好机会。

      直接链接→

      为CSS设计宽高比单元 为WP2原创文章,链接:https://www.wp2.cn/css/%e4%b8%bacss%e8%ae%be%e8%ae%a1%e5%ae%bd%e9%ab%98%e6%af%94%e5%8d%95%e5%85%83/

发表评论

您的电子邮箱地址不会被公开。