繁体   English   中英

CSS:flexbox 按比例缩放其内容直到它们适合,而不会溢出的画廊?

[英]CSS: flexbox gallery that proportionally scales its contents until they fit, without overflowing?

我正在尝试制作一个 16:9 图像的画廊,这些图像限制其容器的宽度和高度。 它们应该自动包装成最适合缩放它们的行或列。 我知道如何通过 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>

下面是相关的.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;
}

基本上,这就是我想要的。 我可以通过在 flexbox 中的项目上设置 flex-basis 来实现它。但是,这不是响应式的; 例如,如果我将 flex-basis 设置为 25%(嗯,24%),那么我将始终得到 4 列。 如果图像没有完全除以 4,那么最后一行会增长 它们需要保持相同的大小,如果有 40 张图像,那么就会有 10 行,这将超出容器的范围! 就是该行为的样子。)

我该怎么做呢? 这是需要JS的东西吗? 我应该使用 grid 而不是 flex 吗?

由于flex: 1; .video-container.video上。 相反,只需使用计算出的width来计算gap: 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>

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM