CSS：flexbox 按比例缩放其内容直到它们适合，而不会溢出的画廊？
[英]CSS: flexbox gallery that proportionally scales its contents until they fit, without overflowing?
问题描述
I am trying to make a gallery of 16:9 images that constrain to both the width and the height of their container.
我正在尝试制作一个 16:9 图像的画廊，这些图像限制其容器的宽度和高度。 They should automatically wrap into however many rows or columns best scales them.它们应该自动包装成最适合缩放它们的行或列。 I know how to do this via JS, but I would much rather choose a CSS solution if it's possible.我知道如何通过 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>
And below is the relevant CSS. .video-container is the gallery.下面是相关的.video-container是画廊。 .video contains the images (which are video thumbnails). .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;
}
Basically, this is what I want .基本上，这就是我想要的。 I can achieve it by setting flex-basis on the items inside the flexbox. However, this is not responsive;我可以通过在 flexbox 中的项目上设置 flex-basis 来实现它。但是，这不是响应式的； for example, if I set flex-basis to 25% (well, 24%), then I will always get 4 columns.例如，如果我将 flex-basis 设置为 25%（嗯，24%），那么我将始终得到 4 列。 And if the images do not perfectly divide by 4, then the last row grows ;如果图像没有完全除以 4，那么最后一行会增长； they need to stay the same size, And if there's, say, 40 images, then there would be ten rows, which would exceed the bounds of the container!它们需要保持相同的大小，如果有 40 张图像，那么就会有 10 行，这将超出容器的范围！ ( This is what that behavior looks like.) （这就是该行为的样子。）
How do I do this?我该怎么做呢？ Is this something that requires JS?这是需要JS的东西吗？ Should I be using grid instead of flex?我应该使用 grid 而不是 flex 吗？
1 个解决方案
解决方案1
0 2023-01-30 19:52:23
The bottom row is growing because of flex: 1;由于flex: 1; on .video-container.video .在.video-container.video上。 Instead, just use a calculated width that factors in your gap: 1vmin for spacing.相反，只需使用计算出的width来计算gap: 1vmin用于间距。
So for example, you could set .video-container.video to width: calc(25% - 1vmin) .因此，例如，您可以将.video-container.video设置为width: calc(25% - 1vmin) 。
body { background-color: grey; } body, body * { padding: 0; margin: 0; text-align: center; } div.video img.test { background-color: #e6e6e6; } div.container { width: 50vw; background-color: white; }.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: flex-start; }.video-container.video { width: calc(25% - 1vmin); }.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.