Question

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

align-self: 居中；和对齐项目：居中；在这种情况下不起作用

这是一个简化的代码。

<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%;
}

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

2 个答案: