如何解决带有 CSS 网格的流体相册
我有一个关于 CSS 网格的小问题,并用它制作一个流畅的、响应式的照片库。有些照片应该更宽(风景),有些照片应该更高(肖像)。另外,我的目标是在它们周围没有任何空白区域,并且仍然使照片保持正常的纵横比。
下面是我想出的代码,它基本上可以很好地完成工作,但我想知道是否有更好的方法来使用网格来做到这一点。
目前我的知识仅限于 HTML 和 CSS,所以我挑战自己用我拥有的工具来做。 :)
我已经缩短了 HTML 代码,因为它会重复。
感谢您的任何帮助! :)
<div class="photoGrid">
<div class="horizontal"><img src="./photos/1.jpeg" alt=""></div>
<div><img src="./photos/2.jpeg" alt=""></div>
<div><img src="./photos/3.jpeg" alt=""></div>
<div class="horizontal"><img src="./photos/4.jpeg" alt=""></div>
<div><img src="./photos/5.jpeg" alt=""></div>
........
<div><img src="./photos/18.jpeg" alt=""></div>
<div class="horizontal"><img src="./photos/19.jpeg" alt=""></div>
<div><img src="./photos/20.jpeg" alt=""></div>
<div class="horizontal"><img src="./photos/21.jpeg" alt=""></div>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.photoGrid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
grid-gap: 10px;
grid-auto-flow: dense;
}
.horizontal {
grid-column: span 2;
}
.photoGrid img {
height: 100%;
width: 100%;
object-fit: cover;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。