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

njthzxwz 于 2023-03-14 发布在其他

关注(0)|答案(4)|浏览(158)

我正在使用CSS网格布局一个缩略图画廊，没有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个缩略图放在一行，这就是为什么我没有定义任何宽度。
如果图像不加载，缩略图div甚至不可见。
换句话说，如果你禁用浏览器中的图像，缩略图div应该在一个正方形的空间。
如何解决这个问题？谢谢

css

来源：https://stackoverflow.com/questions/47713415/how-to-make-div-height-equal-to-width-in-css-grid

4条答案

按热度按时间

qvk1mo1f1#

我不知道如何使用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;
}

赞(0）回复(0）举报 2023-03-14

xdnvmnnf2#

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

赞(0）回复(0）举报 2023-03-14

dkqlctbz3#

最简单的解决方案是将aspect-ratio: 1添加到子div（单元格）的css
你的父div css grid-template-columns: 1fr 1fr 1fr 1fr;创建4列
将aspect-ratio: 1添加到这些列的子列的css会强制每个子列具有相同的height和width

.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>

赞(0）回复(0）举报 2023-03-14

wpx232ag4#

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

赞(0）回复(0）举报 2023-03-14

我来回答

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

4条答案

相关问题

热门标签

最新问答