如何在 CSS Grid 中使 div 高度等于宽度

Posted 2023-03-29

【中文标题】如何在 CSS Grid 中使 div 高度等于宽度

【英文标题】：How to make div height equal to width in CSS Grid

【发布时间】：2018-05-22 15:27:04

【问题描述】：

我使用 CSS Grid 来布局缩略图库，没有使用 javascript 或任何其他响应式技术。我想将缩略图的高度设置为其宽度 (1:1) 的平方比。 为什么？当页面加载时，我需要缩略图 div 占用空间，因为现在如果缩略图 div 内没有图像，它不会占用任何空间。

这是一个实时示例：https://www.w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX

这是代码：

.container max-width: 900px;
.gallery 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;

.thumbnail box-shadow: 0 4px 4px rgba(0,0,0,0.50);
img width: 100%; display: block;

..................

<div class="container">
  <div class="gallery">

    <div class="thumbnail">
      <a href="large-image.jpg">
        <img src="thumbnail-image.jpg">
      </a>
    </div>
    <div class="thumbnail">
      ...... same as above ......
    </div>
    <div class="thumbnail">
      ...... same as above ......
    </div>
    <div class="thumbnail">
      ...... same as above ......
    </div>

  </div>
</div>

上面的代码把宽度（900px）分成四个部分，4个缩略图放在1行。这就是为什么我没有定义任何宽度。 如果图片没有加载，缩略图 div 甚至都不可见。 换句话说，如果您在浏览器中禁用图像，缩略图 div 应该占据方形空间。 如何解决这个问题？谢谢

【问题讨论】：

没有基于fr单位`创建正方形的CSS-Grid方法。

***.com/questions/1495407/…

“当页面加载时，我需要缩略图 div 来占据空间” - 然后通过 html 中的 width 和 height 属性提供实际图像尺寸，所以浏览器会预先知道宽高比是多少...然后它可以在加载实际图像之前根据图像显示的宽度计算正确高度图片。

使用 max-* 属性

@CBroe 我做不到，调整浏览器窗口大小时布局会中断。

【参考方案1】：

我不知道如何使用 css 网格来做到这一点，但我知道如何让 .thumbnail 保持它的比例。

我不久前就学会了这个技巧，从那时起我就一直在使用它。

.thumbnail
   position: relative;

. thumbnail:before
    content: ' ';
    display: block;
    width: 100%;
    padding-top: 100% \* Percentage value in padding derived from the width  *\

.thumbnail > img
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;

【参考方案2】：

解决方案是在网格中添加一个不可见的方形元素（零宽度和 100% 底部填充），通过grid-auto-rows: 1fr 将所有行设置为相等高度；然后重新定位不可见的网格元素以及要重叠的第一个网格元素。

因此，您的 css 文件应如下所示：

.container max-width: 900px;

.gallery 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;


.gallery::before 
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;


.gallery > *:first-child
    grid-row: 1 / 1;
    grid-column: 1 / 1;


.thumbnail box-shadow: 0 4px 4px rgba(0,0,0,0.50);

img width: 100%; display: block;

【参考方案3】：

最大的优点是默认情况下 CSS 网格对其子项应用相似的高度。

选项是重组 HTML 并减少标记 (HTML)。您可以为 .gallery 类添加高度，使其看起来更方。

.container max-width: 900px; margin:0 auto;
.gallery 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;

.thumbnail display:block; box-shadow: 0 4px 4px rgba(0,0,0,0.50);
img display:block; width:100%; height: auto;

    <div class="container">
      <div class="gallery">
          <a class="thumbnail"  href="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg">
            <img src="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg">
          </a>
    
          <a class="thumbnail" href="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg">
            <img src="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg">
          </a>
    
          <a class="thumbnail"  href="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg">
            <img src="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg">
          </a>
    
          <a class="thumbnail"  href="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg">
            <img src="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg">
          </a>
        
        <a class="thumbnail"  href="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg">
            <img src="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg">
          </a>
    
          <a class="thumbnail" href="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg">
            <img src="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg">
          </a>
    
          <a class="thumbnail"  href="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg">
            <img src="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg">
          </a>
    
          <a class="thumbnail"  href="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg">
            <img src="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg">
          </a>
      </div>
    </div>

    

【讨论】：

这并没有解决问题的主要观点 - “我想将缩略图的高度设置为其宽度 (1:1) 的平方比。”

这是一个您可以试验的现场示例：w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX