響應縮略圖網格

Question

我正在嘗試為項目創建響應式縮略圖網格。 然而，無論我如何嘗試調整它，我都不會得到我想要的東西。 我已經嘗試過 grid/flex/minmax/auto-fit/auto-fill 甚至舊式 css 來實現這一點。

對我來說重要的部分是在響應時將縮略圖容器保持在 180x300px 或類似的比例。 如果 window 被調整大小，我已經看到一些網站使用這種縱橫比方法使縮略圖更小更接近。 不知道如何調用這種技術，因此我無法搜索它。 縮略圖跨越整個父容器，在本例中為 100% 寬的容器

這是我目前剩下的一些代碼。

<div class="container">
 <div class="entry" id="1"></div>
 <div class="entry" id="2"></div>
 <div class="entry" id="3"></div>
 <div class="entry" id="4"></div>
 <div class="entry" id="5"></div>
 <div class="entry" id="6"></div>
 <div class="entry" id="7"></div>
 <div class="entry" id="8"></div>
 <div class="entry" id="9"></div>
 <div class="entry" id="10"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap
}

.container > .entry {
  margin: 10px 5px 10px 5px;
  height: 300px;
  width: 180px;
  background: #fff;
}

謝謝你的幫助：：）

Answer 1

我希望我理解正確。 這應該保持 180x300 的寬高比並創建一個到 600px 斷點的網格，此時媒體查詢從grid切換到flex 。

 .container { display: flex; flex-wrap: wrap; background: black; display: flex; flex-direction: column; padding: 48px; align-items: center; } @media only screen and (min-width: 600px) {.container { background: black; grid-column: 1 / -1; grid-gap: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-content: space-evenly; } }.entry { width: 180px; height: 300px; /* width: 100%; */ background: red; margin: 6px 12px; justify-content: center; } @media only screen and (min-width: 600px) {.entry { width: 180px; height: 300px; background: blue; } }

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" /> <body> <div class="container"> <div class="entry" id="1"></div> <div class="entry" id="2"></div> <div class="entry" id="3"></div> <div class="entry" id="4"></div> <div class="entry" id="5"></div> <div class="entry" id="6"></div> <div class="entry" id="7"></div> <div class="entry" id="8"></div> <div class="entry" id="9"></div> <div class="entry" id="10"></div> </div> </body> </html>

響應縮略圖網格

問題描述

1 個解決方案

解決方案1
0 2021-11-26 03:17:22

響應縮略圖網格

問題描述

1 個解決方案

解決方案1 0 2021-11-26 03:17:22

解決方案1
0 2021-11-26 03:17:22