我正在尝试制作一个16:9的图片库,图片库的宽度和高度都受到容器的限制。它们应该自动 Package 成最适合缩放的行数或列数。我知道如何通过JS来实现这一点,但如果可能的话,我更愿意选择CSS解决方案。
/* vvv For demonstration purposes vvv */
body {
background-color: grey;
}
body,
body * {
padding: 0;
margin: 0;
overflow: hidden;
text-align: center;
}
div.video img.test {
/* So we can see the images. */
background-color: #e6e6e6;
}
div.container {
/* The actual size of this container will be responsive. */
/* This basically simulates the aspect ratio for this fiddle, I guess. */
width: 50vw;
height: 90vh;
background-color: white;
}
/* ^^^ For demonstration purposes ^^^ */
.container {
display: flex;
flex-direction: column;
gap: 2vmin;
padding: 10px;
box-sizing: border-box;
}
.video-container {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 1vmin;
align-content: flex-end;
justify-content: center;
}
.video-container .video {
flex: 1;
/* flex-basis: 24%; */
}
.video-container .video>* {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>help :c</title>
</head>
<body>
<div class="container">
<h1>
Header
</h1>
<div>
This is just some body text. The quick brown fox or whatever. Basically, the gallery should fit in the remaining space beneath this element.
</div>
<div class="video-container">
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
<div class="video">
<img width="1920" height="1080" class="test" />
</div>
</div>
</div>
</body>
下面是相关的CSS。.video-container
是图库。.video
包含图像(视频缩略图)。
.video-container {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 1vmin;
align-content: flex-end;
justify-content: center;
}
.video-container .video {
flex: 1;
/* flex-basis: 24%; */
}
.video-container .video > * {
width: 100%;
height: auto;
}
基本上是this is what I want,我可以通过在flexbox里面的项目上设置flex-basis来实现,但是,这是没有响应的;例如,如果我将flex-basis设置为25%(实际上是24%),那么我将始终得到4列,如果图像不能被4完全除尽,那么last row grows;它们需要保持相同的大小!如果有,比如说,40张图片,那么将有10行,这将超出容器的边界!(This是该行为的外观)
我该怎么做?这是需要JS的东西吗?我应该使用网格而不是Flex吗?
1条答案
按热度按时间eeq64g8w1#
最下面一行是因为
.video-container .video
上的flex: 1;
而增长的,相反,只需使用计算出的width
,该width
将gap: 1vmin
作为间距的因子。例如,您可以将
.video-container .video
设置为width: calc(25% - 1vmin)
。