flexbox容器中的左右填充正在拉伸子图像

Question

我有一个flexbox，direction列，有四个子元素，一个图像和三个文本元素。当容器中没有填充时，图像具有正确的比例，但我在容器中添加的右填充和左填充越多，图像就越垂直拉伸。这只会发生在移动设备、iPhone、iPad等设备上。就好像flexbox把图像当作一个文本元素，用更多的填充来拉伸它以适应更多的内容。

align-self: center；和align-items: center；在这种情况下不起作用

这是一个简化的代码。

<li class="painting" > 
   <img src="src">
   <h5 class="Title">{{title}}</h5>
   <p class="Summary">{{summary}}</p>
   <p class="Price">Price: {{price}}</p>
</li>

CSS

li{
    width: 22%;
    margin: 3vh 2%;
    padding: 1% 2%;
    display: flex;
    flex-direction: column;
}
img{
    width: 100%;
    height: auto;
    margin: auto 0;
    align-self: center;
    flex: 0 0 auto;
}
h5{
    margin: 1rem 0 0 0;
    padding: 0 0 0.5rem 0;
}
p{
    margin: 1rem 0 0 0;
    white-space: pre-wrap;
    flex-shrink: 1; 
}

将图像包装在非flex容器中可以解决这个问题，但我想理解这个问题。我不明白这种行为，以及为什么它会发生在移动设备上。有没有人能解释一下这个问题？

Answer 1

您可以使用object-fit属性来避免拉伸图像。

注意:避免为填充、边距等指定百分比值。您可以始终使用media-query进行响应式填充。

Answer 2

为了防止您的子图像被拉伸，在图像标签上设置宽度，然后在css中约束宽度。

HTML：

<img src="src" width="400">

然后更改你的CSS：

img {
max-width: 100%;
}