css - 如何在 flex 行中放置不同尺寸的图像？

Question

我对flex的理解是这样的；

<div class="flex-container">
   <img src="image-1">
   <img src="image-2">
   ...
   <img src ="image-n">
</div>

<style>
   .flex-container {
     display: flex;
     justify-content: space-between;
   }
   .flex-container img {
     flex-shrink: 1;
   }
</style>

具有随机数量的随机大小的图像应该产生宽度为其父级 100% 的图像 block ，图像按比例缩小以适合。我不想包装元素。

上述结果要么是容器溢出，要么是图像失真，结果会因父级或子级的 max- 或 min-height 样式设置而异。

我的理解显然是错误的。但是为什么？

我添加了下面的代码片段，在 Chrome 中图像适合盒子但扭曲了，在 Firefox 中它们溢出了盒子。

Answer 1

将图像设置为 display: block 是不够的。它们需要被封闭起来。

感谢Adriano征求意见建议。

<div class="flex-container">
   <div>
     <img src="image-1">
   </div>
   <div>
   <img src="image-2">
   </div>
   ...
   <div>
    <img src ="image-n">
   </div> 
</div>

<style>
   .flex-container {
     display: flex;
     justify-content: space-between;
   }
   .flex-container div {
     flex-shrink: 1;
   }
   .flex-container div img {
     width: 100%;
     height: auto;
   }
</style>