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

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

您将图像宽度强制为 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>

Answer 2

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

使用*{box-sizing: border-box} 这样border padding 就不会占用额外空间，而是在size 等于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

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

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