CSS 网格图像无法缩放

Question

我做错了什么，css grid 命令没有缩放网格中的项目吗？我一定是误解了 minmax 值的工作原理。

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  /* flex-shrink: 0; */
  grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));
  gap: 1em;
  width: 100%;
  height: 80%;
}

.image {
  display: flex;
  background-size: cover;
  border: solid .5vh black;
  /* overflow: auto; */
  aspect-ratio: 16/9;

}

.image:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: calc(9/16 * 100%);

我假设使用 minmax 设置最小值和最大值将允许网格项放大或缩小以填充网格的大小。我的网格是 .wrapper 的子级。网格项始终缩放到参数最小部分中存在的任何值。我认为这是他们能达到的最小值，而逗号后面的值是他们能达到的最大值。我预计如果网格中的项目较少，则网格项目会放大；如果网格中的项目较多，则网格项目会缩小。

所发生的一切是网格项目保持相同的大小并开始溢出父 .wrapper div。

.wrapper {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: calc(100vw - 4vh);
  height: calc(100vh - 4vh);
  margin: 2vh;
}

Answer 1

一种解决方案是将

grid

类的 div 更改为 Flexbox，然后向

image

类添加以下三个属性：

       object-fit: contain;
       height: 100%;
       width: 100%;

height

和

width

属性会将大小设置为 100% 并且

Object fit

将调整图像大小以适合其父容器。

object-fit CSS 属性设置如何调整被替换元素（例如 or ）的内容大小以适合其容器。

检查以下示例：

      .grid {
        display: flex;
        align-content: center;
        justify-content: center;
        gap: 1em;
        width: 100%;
        height: 80%;
      }

      .image {
        background-size: cover;
        border: solid 0.5vh black;
        object-fit: contain;
        height: 100%;
        width: 100%;
        aspect-ratio: 16/9;
      }

      
      .wrapper {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: calc(100vw - 4vh);
        height: calc(100vh - 4vh);
        margin: 2vh;
      }

这将使子

image

div 元素填充其父

grid

div 元素的大小，同时保持宽高比。