无法在其网格容器中容纳三个图像

Question

我不知道如何解决这个问题：

.picture-container {
  position: absolute;
  top: 36%; 
  width: 90%;
  left: 5%;
  
  border: 5px dashed red;
}

.three-image-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
}

.img-frame-container {

}


.img-frame {
  border: 5px solid #e8e8e8;
  box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
  border-radius: 5px;
  cursor: pointer;
  background: #dfe4ea;
  user-select: none;
  width: 250px;
  height: 150px;
}

<div class="scale-container">

<div class="picture-container">
  <div class="three-image-container">
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/4876243/pexels-photo-4876243.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/9646282/pexels-photo-9646282.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/1386454/pexels-photo-1386454.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
  </div>
</div>

</div>

我希望所有这些图像及其框架具有与您在上面看到的完全相同的 width 和 height，但我希望它们适合 picture-container 宽度和高度.

现在，在固定尺寸的情况下，第三张图片超出了 picture-container 的右边框。

如何将所有三个框架都放入容器中？

我认为使用这个：

display: grid;
grid-template-columns: auto auto auto;

会做我想做的事，但如果我在框架内使用图像，它似乎不起作用！

请注意，框架的尺寸应相同且不超过容器尺寸，我希望能够拥有更多或更少的框架，因此我们可能需要某种最大宽度或其他东西。

Answer 1

从 .picture-container 中删除 width: 90%;。

这使得 div 占据父级宽度的 90%（它本身填充了 window），而不管它自己的内容如何。

Answer 2

将 display 从 grid 更改为 flex 并使用宽度的相对值（%，值取决于容器或 window 大小）而不是绝对值（px，值不取决于容器或 window 大小）。

使用 *{box-sizing: border-box} 以便 border padding 不会占用额外的 space 而是利用内容 space 来减少 [=20] 时的溢出=] 等于 screen width

See here more about box-sizing

* {
  box-sizing: border-box
}

.picture-container {
  width: 100%;
  border: 5px dashed red;
}

.three-image-container {
  display: flex;
}

.img-frame-container {
  width: 100%;
  padding:0 10px;
}

.img-frame {
  border: 5px solid #e8e8e8;
  box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
  border-radius: 5px;
  cursor: pointer;
  background: #dfe4ea;
  user-select: none;
  width: 100%;
  height: 150px;
  object-fit: fill;
}

<div class="scale-container">

  <div class="picture-container">
    <div class="three-image-container">
      <div class="img-frame-container">
        <img class="img-frame" src="https://images.pexels.com/photos/4876243/pexels-photo-4876243.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      </div>
      <div class="img-frame-container">
        <img class="img-frame" src="https://images.pexels.com/photos/9646282/pexels-photo-9646282.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      </div>
      <div class="img-frame-container">
        <img class="img-frame" src="https://images.pexels.com/photos/1386454/pexels-photo-1386454.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      </div>
    </div>
  </div>

</div>

Answer 3

您将图片宽度强制设置为 250 像素。我在 .img-frame 和 box-sizing: border-box 上添加了 max-width:100% 以确保项目的宽度包括边框。

Read more on the box-sizing property

另外 gap 属性应该是 grid-gap

.picture-container {
  position: absolute;
  top: 36%; 
  width: 90%;
  left: 5%;
  border: 5px dashed red;
}

.three-image-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px; /* this was fixed */
}

.img-frame-container {

}


.img-frame {
  border: 5px solid #e8e8e8;
  box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
  border-radius: 5px;
  cursor: pointer;
  background: #dfe4ea;
  user-select: none;
  width: 250px;
  height: 150px;
  /* these 2 lines were added */
  max-width: 100%; 
  box-sizing: border-box;
}

<div class="scale-container">

<div class="picture-container">
  <div class="three-image-container">
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/4876243/pexels-photo-4876243.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/9646282/pexels-photo-9646282.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/1386454/pexels-photo-1386454.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
  </div>
</div>

</div>

无法在其网格容器中容纳三个图像

unable to fit three images inside their grid container

html

css

css-grid