CSS 网格图像不能垂直缩放

Question

我目前正在处理一个项目，其中我必须以网格布局显示图像。对我来说很自然的事情就是使用 CSS 网格。我有一个可行的解决方案，它仅适用于某些纵横比（纵向纵横比）。一旦宽高比在横向侧（尤其是 16:9）更多，整个网格就不再适合屏幕了。图像似乎是问题所在，因为它们不能垂直“缩放”。

“纵向”宽高比看起来不错：

“宽”纵横比看起来很糟糕：

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.client {
  display: grid;
  border: 3px solid black;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
}

.client-title {
  grid-column: 1 / -1;
  grid-row: 1;
}

.client-description {
  grid-column: 1 / -1;
  grid-row: 6;
}

.exercise-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="client">
    <div class="client-title">
      Title Text 1
    </div>

    <!-- Repeated 8 times -->
    <div class="exercise">
            <img class=" exercise-image " src="https://via.placeholder.com/300.jpg">
        </div>

        <div class="client-description ">
           Description Text 1
        </div>
    </div>
    <div class="client ">
        <div class="client-title ">
            Title Text 2
        </div>

        <!-- Repeated 8 times -->
        <div class="exercise">
      <img class="exercise-image" src="https://via.placeholder.com/300.jpg">
    </div>

    <div class="client-description">
      Description Text 2
    </div>
  </div>
</div>

你有什么想法，我想念这里吗？

谢谢！

Answer 1

将 .client 网格的高度直接设置为全视口高度，并移除其网格容器元素 .container 的 height: 100vh。这是可行的，因为现在“.client”网格的网格行的高度是直接相对于视口的当前高度计算的。并且包含元素会相应地适应该孩子的身高。
将包含每行图像的 .exercise 网格项的 min-height 设置为 0 以覆盖默认值（min-width/min-height：auto 是CSS 网格默认设置），从而使图像缩小到其自身大小以下。

CSS:

.container {
  position: fixed;
  top: 0;
  left: 0;
  // height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.client {
  display: grid;
  border: 3px solid black;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
  height: 100vh; // height: 100%;
}

.client-title {
  grid-column: 1 / -1;
  grid-row: 1;
}

.client-description {
  grid-column: 1 / -1;
  grid-row: 6;
}

.exercise {
  min-height: 0;
}

.exercise-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

CSS 网格图像不能垂直缩放

CSS Grid Images don't scale vertically

html

css

image

scale

css-grid