如何使这个 CSS 网格响应图像？ [关闭]

Question

我试图更好地理解网格 CSS，但我似乎无法弄清楚如何使它与图像一起工作。我喜欢它的响应方式，但当我添加图像时它们会重叠。实例在这里

Codepen 来说明我喜欢的响应行为，我无法使用图像。

<div class="grid">
      <div class="grid-item">path/to/image</div>
      <div class="grid-item">path/to/imag</div>
      <div class="grid-item">path/to/imag</div>
      <div class="grid-item">path/to/imag</div>
      <div class="grid-item">path/to/imag</div>
      <div class="grid-item">path/to/imag</div>
      <div class="grid-item">path/to/imag</div>
      <div class="grid-item">path/to/imag</div>
    </div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 5px;
}

我在最终设计中去掉了样式，下面只是为了说明

.grid-item {
  font-size: 30px;
  padding: 0.5em;
  color: #ffffff;
  background: #1c87c9;
  text-align: center;
}

Answer 1

为你的图像创建一个类，并给它“max-width: 100%; max-height: 100%; display: block;”所以包含的 div 可以包含它。

<!-- css -->
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}

.grid-item {
font-size: 30px;
padding: 0.5em;
color: #ffffff;
background: #1c87c9;
text-align: center;
}

.pic {
max-width: 100%;
max-height: 100%;
display: block;
}

<!-- html -->
<div class="grid">
  <div class="grid-item"><img src="https://praestocreative.com/images/pic1.png" class="pic" alt="description 1"></div>
  <div class="grid-item"><img src="https://praestocreative.com/images/pic2.png" class="pic" alt="description 2"></div>
  <div class="grid-item"><img src="https://praestocreative.com/images/pic3.png" class="pic" alt="description 3"></div>
  <div class="grid-item">path/to/imag</div>
  <div class="grid-item">path/to/imag</div>
  <div class="grid-item">path/to/imag</div>
  <div class="grid-item">path/to/imag</div>
  <div class="grid-item">path/to/imag</div>
</div>

https://jsfiddle.net/jasonbruce/791pL0oa/1/