小编MEG*_*EGA的帖子

我正在使用 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 ...... …