具有持久纵横比的响应式 CSS 网格

Question

我的目标是创建一个具有未知数量项目的响应式网格，将它们的纵横比保持在 16:9。现在它看起来像这样：

 .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 160px);
    grid-template-rows: 1fr;
    grid-gap: 20px;
 }
.item {
    height: 90px;
    background: grey;
}

 <div class="grid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
</div>

问题是，这些项目不会随屏幕尺寸缩放，从而导致在正确的位置出现边距。但是，当使用例如 grid-template-columns: repeat(auto-fit, minmax(160p, 1fr)) 使网格适应屏幕尺寸并删除 height: 90px; 时，纵横比不会保持不变。

也许没有 css 网格有更好的解决方案？ （也许使用javascript）

原文由 Flo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以利用百分比填充基于宽度这一事实。

这篇 CSS 技巧文章 很好地解释了这个想法：

…如果你有一个 500px 宽的元素，padding-top 为 100%，则 padding-top 将为 500px。

那不是一个完美的正方形吗，500px × 500px？是的！纵横比！

如果我们强制元素的高度为零 (height: 0;) 并且没有任何边框。然后填充将是盒子模型中影响高度的唯一部分，我们将得到我们的正方形。

现在想象一下，我们使用 56.25% 而不是 100% 顶部填充。这恰好是完美的 16:9 比例！ (9 / 16 = 0.5625)。

因此，为了使列保持纵横比：

1. 按照您的建议设置列宽：

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))

1. 向项目添加一个伪元素以保持 16:9 的纵横比：

    .item:before {
     content: "";
     display: block;
     height: 0;
     width: 0;
     padding-bottom: calc(9/16 * 100%);
   }

 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 20px;
}
.item {
  background: grey;
  display: flex;
  justify-content: center;
}
.item:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: calc(9/16 * 100%);
}

 <div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Codepen Demo （调整大小看效果）

原文由 Danield 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

CSS Evolution：纵横比属性

我们现在可以使用 aspect-ratio CSS4 属性（ 我可以使用吗？ ）来轻松管理纵横比，无需填充和伪元素技巧。结合 object-fit 我们获得了非常有趣的渲染。

在这里，我需要以 ¹⁶⁄₉ 渲染各种比例的照片：

 section {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Play with min-value */
}

img {
  background-color: gainsboro; /* To visualize empty space */
  aspect-ratio: 16/9;
  /*
    "contain" to see full original image with eventual empty space
    "cover" to fill empty space with truncating
    "fill" to stretch
  */
  object-fit: contain;
  width: 100%;
}

 <section>
  <img src="https://placeimg.com/640/360/architecture">
  <img src="https://placeimg.com/640/360/tech">
  <img src="https://placeimg.com/360/360/animals">
  <img src="https://placeimg.com/640/360/people">
  <img src="https://placeimg.com/420/180/architecture">
  <img src="https://placeimg.com/640/360/animals">
  <img src="https://placeimg.com/640/360/nature">
</section>

游乐场： https ://codepen.io/JCH77/pen/JjbajYZ

原文由 JCH77 发布，翻译遵循 CC BY-SA 4.0 许可协议