Html 为什么 flexbox 会拉伸我的图像而不是保持纵横比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37609642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does flexbox stretch my image rather than retaining aspect ratio?
提问by sjbuysse
Flexbox has this behaviour where it stretches images to their natural height. In other words, if I have a flexbox container with a child image, and I resize the width of that image, the height doesn't resize at all and the image gets stretched.
Flexbox 具有这种行为，它将图像拉伸到它们的自然高度。换句话说，如果我有一个带有子图像的 flexbox 容器，并且我调整了该图像的宽度，则高度根本不会调整大小并且图像会被拉伸。
div {
display: flex;
flex-wrap: wrap;
}
img{
width: 50%
}<div>
<img src="https://loremflickr.com/400/300" >
<h4>Appify</h4>
<p> some text </p>
</div>What causes this?
这是什么原因造成的？
I added This CodePento demonstrate what I mean.
我添加了This CodePen来演示我的意思。
回答by pradeep1991singh
It is stretching because align-selfdefault value is stretch.
Set align-selfto center.
它正在拉伸，因为align-self默认值为stretch。设置align-self为center。
align-self: center;
See documentation here: align-self
请参阅此处的文档： align-self
回答by Dorian
The key attribute is align-self: center:
关键属性是align-self: center：
.container {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
}
img.align-self {
align-self: center;
}<div class="container">
<p>Without align-self:</p>
<img src="http://i.imgur.com/NFBYJ3hs.jpg" />
<p>With align-self:</p>
<img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>回答by isapir
I faced the same issue with a Foundation menu. align-self: center;didn't work for me.
我在 Foundation 菜单中遇到了同样的问题。 align-self: center;对我不起作用。
My solution was to wrap the image with a <div style="display: inline-table;">...</div>
我的解决方案是用一个 <div style="display: inline-table;">...</div>
回答by Akash
Adding marginto align images:
添加margin对齐图像：
Since we wanted the imageto be left-aligned, we added:
由于我们希望image成为left-aligned，我们添加了：
img {
margin-right: auto;
}
Similarly for imageto be right-aligned, we can add margin-right: auto;. The snippet shows a demo for both types of alignment.
同样，对于image要right-aligned，我们可以添加margin-right: auto;。该代码段显示了两种对齐方式的演示。
Good Luck...
祝你好运...
div {
display:flex;
flex-direction:column;
border: 2px black solid;
}
h1 {
text-align: center;
}
hr {
border: 1px black solid;
width: 100%
}
img.one {
margin-right: auto;
}
img.two {
margin-left: auto;
}<div>
<h1>Flex Box</h1>
<hr />
<img src="https://via.placeholder.com/80x80" class="one"
/>
<img src="https://via.placeholder.com/80x80" class="two"
/>
<hr />
</div>回答by mohamed ali
It is stretching because align-self default value is stretch. there is two solution for this case : 1. set img align-self : center OR 2. set parent align-items : center
它是拉伸，因为 align-self 默认值是拉伸。这种情况有两种解决方案：1. 设置 img align-self : center 或 2. set parent align-items : center
img {
align-self: center
}
OR
或者
.parent {
align-items: center
}
