响应缩略图网格答案

【问题标题】：Responsive Thumbnail Grid响应缩略图网格
【发布时间】：2022-01-04 03:38:54
【问题描述】：

我正在尝试为项目创建响应式缩略图网格。然而，无论我如何尝试调整它，我都不会得到我想要的东西。我已经尝试过 grid/flex/minmax/auto-fit/auto-fill 甚至旧式 css 来实现这一点。

对我来说重要的部分是在响应时将缩略图容器保持在 180x300 像素或类似的比例。我已经看到一些网站使用这种纵横比方法来使缩略图在调整窗口大小时变得更小更接近。不知道如何调用这种技术，因此我无法搜索它。缩略图跨越整个父容器，在本例中为 100% 宽的容器

这是我目前剩下的一些代码。

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

.container,.entry {
  margin: 10px 5px 10px 5px;
  height: 300px;
  width: 180px;
  background: red;
}

<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>

感谢您的帮助！ :)

【问题讨论】：

标签： html css grid responsive thumbnails

【解决方案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>

【讨论】：