随机图像大小的 CSS flexbox 问题答案

【问题标题】：How can I fit images with varying sizes in a flex row?随机图像大小的 CSS flexbox 问题
【发布时间】：2021-12-08 01:21:16
【问题描述】：

我对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% 的图像块，并且图像的大小会按比例缩小以适合。我不想包装这些物品。

上述结果要么是容器溢出，要么是图像失真，结果取决于父或子的max- 或min-height 样式设置。

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

我在下面添加了 sn-p，在 Chrome 中图像适合盒子但变形了，在 Firefox 中它们会溢出盒子。

【问题讨论】：

.flex-container 没有关闭，是错误还是在您的代码中？
尝试将每个img 包装成div。 div 默认是块元素，而 img 是内联的。此外，将图像设置为width: 100%;，以便它们都填充父 div。
应该是重复的Maintain image aspect ratio when changing height
一个弹性容器只会将所有子容器设置为彼此相邻，无论您设置的宽度如何，内容都会溢出。这是它的行为。所以我想你的问题没有解决方案，因为它正在寻找文档

标签： css flexbox

【解决方案1】：

感谢@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>

将img 设置为display: block 是不够的，需要将它们括起来。

【讨论】：

【解决方案2】：

如果您希望图像保持比例，请将align-items: flex-start; 添加到您的容器中。

“css“align-items”属性的默认值为“stretch”，这会导致您的图像被拉伸到其原始高度。将css“align-items”属性设置为“flex” -start" 解决了你的问题。"

或者您将每个图像设置到一个容器中（使用display:block;）。

如果您希望图像中断并转到下一行，只需将 flex-wrap:wrap; 添加到您的容器中。

.flex-container {
   display: flex;
   justify-content: space-between;
   /* ADDED */
   align-items: flex-start;
   /*flex-wrap:wrap;*/
}
.flex-container img {
   flex-shrink: 1;
}

<div class="flex-container">
   <img src="https://dummyimage.com/600x400/000/fff">
   <img src="https://dummyimage.com/200x600/e31da8/000">
   ...
   <img src ="https://dummyimage.com/60x40/000/fff">
</div>

【讨论】：

我仍然看到水平滚动条
@SalmanA 只需 flex-wrap: wrap; 到您的容器，这只是 flex 的正常行为方式。它将进入下一个“行”
如果图片大于正文，那么您可以随时在其上设置max-width: 100vw 或通过媒体查询进行调整。
我不想让他们换行，这似乎是问题之一，align-items: flex-start 没有效果。我将不得不对此进行模拟。