如何在网格内的 div 内缩放图像？

Question

我正在使用网格布局。我使用 grid-template-column 和 grid-template-rows 来定义它的结构。我希望第一个单元格包含一个图像。因为我想将它水平居中，所以我的想法是将它放在一个 div 中，它本身可以是一个 flex 或 grid 容器。

我在缩放图像时遇到问题。当不使用 div 时，我基本上是将图像直接放在网格内，我可以使用 height: 100%; 并按比例缩小，以便高度适合单元格。

但是当使用一个额外的 div 容器时，它不再起作用了。使用 height: 100% 似乎是指整个网格布局的高度，而不仅仅是 div。 Google 说我应该使用 max-height 和 max-width，但我无法让它工作。下面是一个简单的测试项目（HTML 和 CSS）来显示问题。当使用 width: 25px; 你可以看到，网格的部分应该有多大。

感谢任何帮助。请记住，这是一个简单的测试项目，所以不要介意我的类和 ID 的命名。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

.class {
  background-color: blue;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3fr 3fr;
  gap: 10px;
  background-color: green;
}

#image-container>img {
  max-height: 100%;
}

<div class="container">
  <div class="class" id="image-container">
    <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="">
  </div>
  <div class="class" id="2">Good</div>
  <div class="class" id="3">Day</div>
</div>

Answer 1

我的首选方法是将其设置为背景图像，并带有 background-size:contain（或封面）。这应用了来自浏览器的逻辑，而不是试图自己正确处理并且完全响应。

.exampleA, .exampleB{
    width: 34%;
    height: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: pink;  /* Just for this demo:  to display canvas size */
    border: 1px solid black; /* Just for this demo */
    display: inline-block;
}

.exampleA {
    background-size: contain;
}
.exampleB {
    background-size: cover;
}

<div class="exampleA"
     style="background-image: url('https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg');"
></div>
        
<div class="exampleB"
      style="background-image: url('https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg');"
></div>

Answer 2

检查子元素 class 和父元素 max-height 的溢出以获得预期结果。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  min-height: 100%;
}

.parent {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr repeat(2, 3fr);
  gap: 1rem;
  background: orchid;
  max-width: 100%;
  max-height: 100vh;
}
.class{
  background: teal;
  overflow: hidden;
}

img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="parent">
  <div class="class">
    <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="">
  </div>
  <div class="class">
    <p>Good</p>
  </div>
  <div class="class">
    <p>Day</p>
  </div>
</div>

如何在网格内的 div 内缩放图像？

How can I scale an image inside a div which is inside a grid?

html

css

web