在 CSS/HTML 中創建類似“縮放”的動態畫廊視圖
[英]Creating a 'Zoom' like dynamic gallery view in CSS/HTML
問題描述
我有一個應用程序，我想在其中創建一個全尺寸的 HTML 頁面，以便在 Kiosk 上顯示。 Javascript 將根據與信息亭交互的人數來改變圖像的數量（這一面已全部處理）。
我可以有一張圖片，可以是兩張、三張、四張，最多 7x7 = 49。
我想創建一個與“縮放”創建畫廊視圖的方式非常相似的布局。 例如：
- 一張圖片：將是頁面的 100% 寬度和高度
- 兩張圖片：寬度/高度為 50%，並排顯示，頁面頂部和底部帶有信箱
- 三張圖片：兩張在頂線上，一張在底部 - 底部一張水平居中
- 四個圖像：2x2 網格
- 五個圖像：頂行三個，底行兩個
- ETC
- 九幅圖像：3x3 網格
你懂的圖片！
我今天花了好幾個小時試圖解決這個問題。 因為我嘗試了很多選項，所以我真的沒有工作代碼可以顯示了。 我嘗試過純 CSS、jquery 操作表、創建磚石畫廊的實用程序等。似乎沒有一個能達到我想要的。
有沒有人對如何實現這一點有任何好主意？
它在受控環境中的 Chrome 上運行，因此無需擔心跨瀏覽器兼容性，並且通常可以使用大多數技術選項來使其正常工作。
謝謝
1 個解決方案
解決方案1
0 已采納 2021-01-10 14:37:40
如果您希望新人進入底部/左側，那么網格就是答案。 但是要使底行居中，我們需要轉向 flex。
由於您可能會使用 JS 插入或刪除人員，因此您可以計算每次需要多少列並重新組織屏幕。
這是一個顯示計算的片段。 更改#container 中的div 數量以查看效果。 person div 的縱橫比在 JS 中設置為變量 personAspect。 當前設置為 16:9，但可以根據需要進行更改。
<head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #screen { position: relative; width: 100vw; height: 100vh; background-color: black; overflow: hidden; } #container { position: relative; top: 50%; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; }.person { background-image: url(https://i.stack.imgur.com/ju8HY.jpg); background-size: cover; background-repeat: no-repeat; } </style> <style id="person"> </style> </head> <div id="screen" > <div id="container"> <div class="person"></div> <div class="person"></div> <div class="person"></div> <div class="person"></div> <div class="person"></div> </div> </div> <script> const personAspect = 16/9; /* SET TO WHAT YOU WANT IT TO BE FOR EACH PERSON DIV */ const maxCols = 7; const screen = document.getElementById("screen"); const container = document.getElementById("container"); function reorganize() { const people = container.querySelectorAll('.person'); const numPeople = people.length; const screenAspect = window.innerWidth/window.innerHeight; let cols = 1; for (cols; cols <= maxCols; cols++) { if (numPeople <= (cols * cols)) { break; } } let w = 0; //will be of the container in px let h = 0; //will be height of the container in px if (numPeople > (cols * (cols-1))) {// > OK for 5 and 6 not OK for 7 h = window.innerHeight; w = h * personAspect; } else { w = window.innerWidth; h = w / personAspect; } container.style.width = w + 'px'; document.getElementById('person').innerHTML = '.person {flex: 0 0 ' + (100/cols) + '%; height: ' + (h/cols) + 'px;}'; if (numPeople <= (cols * (cols-1))) {h = h- h/cols;}// for when last row is empty container.style.marginTop = (- h)/2 + 'px'; } reorganize(); window.onresize = reorganize;//not needed for final production but to make it easier to use the real window aspect ratio when developing </script> </body>
具有內部縮放功能的CSS圖像庫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.