logo标签列表

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

htmlcsscss-grid
15

我正在使用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个缩略图放置在1行中。这就是为什么我没有定义任何宽度。
如果图像不加载，缩略图div甚至都不会可见。
换句话说，如果在浏览器中禁用图像，则缩略图div应以正方形占用空间。
如何解决这个问题？谢谢。

1
https://dev59.com/u3I_5IYBdhLWcg3wK_zE - Paulie_D
1
当页面加载时，我需要缩略图div占据空间。通过在HTML中提供实际图像尺寸的width和height属性，以便浏览器可以事先知道它的纵横比，然后它可以根据图像显示的宽度计算出正确的高度，而不必等到实际图像加载完成。 - CBroe
使用max-*属性 - Rajendran Nadar
1
@CBroe，我做不到那样，当调整浏览器窗口大小时，布局会破裂。 - MEGA
@CBroe 这是一个实时示例：https://www.w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX - MEGA
显示剩余7条评论
4个回答
14

解决方案是在网格中添加一个不可见的正方形元素（宽度为零，底部填充为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
我不知道你做了什么，但它可以工作。 - Alex
1
这是纯粹的天才。 - Yangshun Tay
12

我不确定如何使用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;
}
11

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

您父级div的CSS grid-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>
这太棒了，不确定为什么没有更多的赞！ - grepsedawk
1
这是一个不错的解决方案，但是不幸的是iOS 14及以下版本不支持aspect-ratio，所以我只能选择另一种解决方案。 - user19103974
-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）正方形比例。” - Paulie_D
1
这是一个可以进行实验的现场示例：https://www.w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX - MEGA
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接