我正在使用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应该在一个正方形的空间。
如何解决这个问题?谢谢
4条答案
按热度按时间qvk1mo1f1#
我不知道如何使用css网格,但我知道如何使
.thumbnail
保持它的比例。我不久前学会了这个把戏,从那以后我一直在用它。
xdnvmnnf2#
解决方案是在网格中添加一个不可见的正方形元素(零宽度和100%底部填充),将所有行的高度设置为
grid-auto-rows: 1fr
;然后重新定位不可见网格元素以及第一网格元素以重叠。因此,您的css文件应该如下所示:
dkqlctbz3#
最简单的解决方案是将
aspect-ratio: 1
添加到子div(单元格)的css你的父div css
grid-template-columns: 1fr 1fr 1fr 1fr;
创建4列将
aspect-ratio: 1
添加到这些列的子列的css会强制每个子列具有相同的height和widthwpx232ag4#
最大的优点是CSS网格默认情况下会将类似的高度应用到其子网格。
选项是重构HTML并减少标记(HTML)。您可以向
.gallery
类添加高度以使其看起来更方形。