Flexbox 有这种行为，它将图像拉伸到它们的自然高度。换句话说，如果我有一个带有子图像的 flexbox 容器，并且我调整了该图像的宽度，那么高度根本不会调整大小并且图像会被拉伸。
div {显示：弹性；弹性包装：换行； } img { 宽度：50% }
标题
段落
这是什么原因造成的？
align-self:flex-start 进行修复。我不知道为什么，也许chrome中的默认值是stretch。
align-items: stretch / align-self: stretch。如果您在每个项目周围添加边框并删除 wrap，您会注意到所有项目在所有浏览器中都会拉伸：codepen.io/anon/pen/oLXBVx?editors=1100
关键属性是 align-self: center：
.container { 显示：弹性；弹性方向：列； } img { 最大宽度：100%； } img.align-self { 对齐自我：中心； }
没有 align-self:
有 align-self:
我在使用 Foundation 菜单时遇到了同样的问题。 align-self: center; 对我不起作用。
我的解决方案是用 <div style="display: inline-table;">...</div> 包装图像
添加边距以对齐图像：
由于我们希望 image 为 left-aligned，因此我们添加了：
img {
margin-right: auto;
}
类似地，为了使 image 成为 right-aligned，我们可以添加 margin-right: auto;。该片段显示了两种对齐类型的演示。
祝你好运...
div {显示：弹性；弹性方向：列；边框：2px 黑色实心； } h1 { 文本对齐：居中； } hr { 边框：1px 黑色实心；宽度：100% } img.one { 边距：自动； } img.two { 左边距：自动； }
Flex Box
我在制作导航栏时遇到了类似的问题，但以上都不适用于我。
我的解决方案是为图像添加 height: 100%。
如果您要水平对齐项目，请改为添加 width: 100%。
编辑：Chrome 似乎现在默认添加此值，但您需要添加此值以实现兼容性。
它正在拉伸，因为 align-self 默认值为拉伸。这种情况有两种解决方案： 1. 设置 img align-self : center 或 2. 设置父 align-items : center
img {
align-self: center
}
或者
.parent {
align-items: center
}
使用以下 CSS 设置之一：contain 或 cover 最受欢迎
.my-img {
object-fit: contain;
}
或者
.my-img {
object-fit: cover;
}
我遇到了类似的问题，我的解决方案是将 flex-shrink: 0; 添加到图像中。
align-self: start;可能是一个更强有力的答案，因为图像应该垂直对齐到其容器的顶部（而不是中心），就像任何无样式图像（无 css）一样。无论哪种方式，两个答案都可以解决拉伸问题。因此，这当然取决于OP想要什么-只是没有从OP的帖子中获得“垂直居中”的印象。align-self: [flex-start, center...others]将防止图像占用 flex-containers 宽度的 100%。align-self:center当然会修复它，但如果您希望图像从容器的开头或结尾开始，请使用align-items: flex-start or flex-endalign-items: center（或任何适合您需要的对齐方式）放在父级上。