如何使 div 高度等于 CSS 网格中的宽度

Question

我正在使用 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 应占用方形空间。
如何解决这个问题？谢谢

Answer 1

最简单的解决方案是添加aspect-ratio: 1到子div（单元格）的css

你的父 div cssgrid-template-columns: 1fr 1fr 1fr 1fr;创建 4 列

添加aspect-ratio: 1到这些列子项的css中会强制每个子项具有与宽度相同的高度

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.thumbnail {
  aspect-ratio: 1
}


<div class="gallery">

     <div class="thumbnail">
            <img src="image1.jpeg">
     </div>

     <div class="thumbnail">
            <img src="image2.jpeg">
     </div>

     <div class="thumbnail">
            <img src="image3.jpeg">
     </div>

     <div class="thumbnail">
            <img src="image4.jpeg">
     </div>
</div>

Answer 2

我不知道如何用 css grid 来做，但我知道如何.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;
}

Answer 3

解决方案是在网格中添加一个不可见的方形元素（零宽度和 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;}

Answer 4

最大的优点是 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>