[英]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>
CSS 文本溢出其容器：寬度不適合內容 - 沒有寬度的解決方案：適合內容
[英]CSS text overflowing its container: width not fitting content - Solution without width: fit-content
使導航菜單始終正確顯示而不會溢出內容
[英]Make the navigation menu always appear correctly without its contents overflowing
如何拉伸div以使其適合內容，直到達到其父級的高度？
[英]How stretch div to fit contents until it reaches the height of its parent?
Flexbox CSS-擴大框以適合內容，而不影響其他行
[英]Flexbox CSS - growing a box to fit content, without affecting other rows
使用 css flexbox 在畫廊視圖中顯示動態 div 數以適合容器
[英]display dynamic number of divs in a gallery view to fit in a container using css flexbox
定寬時 <td> 擴展以適合其內容，另一個 <td> 相同寬度的s也按比例擴展（使用CSS）
[英]When a fixed-width <td> expands to fit its content, the other <td>s of that same width expand proportionally as well (using CSS)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.