Html 使用Flexbox拉伸图像

我得到了一个

div

，其中一行包含一个图像和5个文本元素，我使用

Flexbox

将它们均匀地隔开。所有段落看起来都和预期的一样，但只要我将宽度或高度更改为

100%

以外的任何值，图像就会被拉伸。我使用了

align items:center

和

align self:center

部分{
显示：块；
宽度：960px；
保证金：0自动；
填充顶部：20px；
}
.结果{
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
高度：70像素；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
}
.结果img{
宽度：自动；
自对准：居中；
高度：30px；
}

4月1日19:45-21:05

AMS-ORY
跨经

直接
1小时20分钟

瑞典克朗611
经济舱

7/10

只要我将宽度或高度更改为100%以外的任何值，图像就会被拉伸。 这是因为您指定了一个固定的高度，所以高度必须为30px。。。现在，如果您指定宽度为100%，图像将被拉伸，因为我使用的是一个非常大的图像

您有以下选择：

• 在蓝色部分。。。我有一个巨大的图片（通过一个公共URL）来显示宽度为%的行为（而高度保持自动）-这需要媒体查询在移动设备上获得最佳结果
• 在绿色部分。。。我有一个巨大的图片（通过一个公共URL）来显示行为，大小以像素为单位——这也会在移动设备上产生一致的结果
• 在粉色部分。。。我已经使用了你的固定高度和我使用的任何宽度，我会得到一个拉伸图像，因为图像是大的，高度是固定的
• 在灰色部分。。。我使用了最小高度，由于图像较大，它将变为默认大小（因为它符合最小高度条件）

部分{
显示：块；
最大宽度：960像素；
保证金：0自动；
填充顶部：20px；
}
第N节儿童（1）{
背景颜色：浅蓝色；
}
第N节儿童（2）{
背景颜色：浅绿色；
}
第N节儿童（3）{
背景颜色：浅粉色；
}
第N节儿童（4）{
背景颜色：浅灰色；
}
.结果{
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
最小高度：70px；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
柔性包装：包装；
}
第n节子项（1）.结果img{
宽度：4%；
自对准：居中；
}
章节：第n个孩子（2）。结果img{
宽度：38px；
自对准：居中；
}
章节：第n个孩子（3）。结果img{
高度：30px；
宽度：10%；
自对准：居中；
}
章节：第n个孩子（4）。结果img{
最小高度：30px；
自对准：居中；
}
.结果>*{
边框：1px点黄色；
}

4月1日19:45-21:05

AMS-ORY
跨经

直接
1小时20分钟

瑞典克朗611
经济舱

7/10
4月1日19:45-21:05

AMS-ORY
跨经

直接
1小时20分钟

瑞典克朗611
经济舱

7/10
4月1日19:45-21:05

AMS-ORY
跨经

直接
1小时20分钟

瑞典克朗611
经济舱

7/10
4月1日19:45-21:05

AMS-ORY
跨经

直接
1小时20分钟

瑞典克朗611
经济舱

7/10

您的图像大小是多少？@AymanMorsy 320x320用于此特定图像，但我尝试过的所有大小不同的图像都会出现这种情况。当我在本地运行类似的操作时，我没有看到这种行为。也许我不明白您正在更改哪个

高度

或

宽度

会产生图像拉伸？这个问题可能会有帮助：太好了，谢谢。应用时按预期工作。但是，最小高度而不是固定高度使容器比预期的大得多。为什么会发生这种情况？如果我们执行

最小高度

，并且图像较大-它将默认为其原始大小，并且div将增加大小以适应它。。。让我用这个场景更新答案