html - 如何使多个图像适合一个容器？

Question

我在一个容器中有多个图像，并希望它们适合一个容器，但问题是我无法更改宽度和高度，因为我目前正在制作一个动态应用。

如您所见，我为容器设置了红色边框，右侧边框不见了。

这是我得到的:

.container {
  display: flex;
  width: 450px;
  height: 300px;
  border: 2px solid red;
}

.container img {
  max-width: 100%
}

<div class="container">
  <img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
  <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  <img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
</div>

如何使这些图像适合红色边框？

Answer 1

您可以尝试使用 flex: 1 CSS 属性。

.container {
  display: flex;
  width: 450px;
  height: 300px;
  border: 2px solid red;
}
.container div {
  flex: 1;
}
.container img {
  max-width:100%;
}

  
<div class="container">
  <div>
    <img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
  </div>
   <div>
     <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">   </div>
   <div>
     <img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
   </div>
 </div>