为什么 flexbox 会拉伸我的图像而不是保留纵横比？答案

【问题标题】：Why does flexbox stretch my image rather than retaining aspect ratio?为什么 flexbox 会拉伸我的图像而不是保留纵横比？
【发布时间】：2016-10-03 05:46:22
【问题描述】：

Flexbox 具有将图像拉伸到其自然高度的这种行为。换句话说，如果我有一个带有子图像的 flexbox 容器，并且我调整了该图像的宽度，则高度根本不会调整大小并且图像会被拉伸。

div {
  display: flex; 
  flex-wrap: wrap;
}

img {
  width: 50%
}

<div>
    <img src="https://i.imgur.com/KAthy7g.jpg" >
    <h1>Heading</h1>
    <p>Paragraph</p>
</div>

是什么原因造成的？

【问题讨论】：

在 Firefox 和 IE 中工作正常。在 Chrome 中，您可以使用图像中的align-self:flex-start 进行修复。不知道为什么，可能chrome的默认值是stretch。
还增加高度：100%； img 解决了这个问题，我想知道为什么它也会拉伸图像。
@blonfu，所有浏览器的默认值为align-items: stretch/align-self: stretch。如果您在每个项目周围添加边框并删除 wrap，您会注意到所有项目在所有浏览器中都会拉伸：codepen.io/anon/pen/oLXBVx?editors=1100
好的。我学到了这一点，但图像在 chrome 和其他浏览器中的工作方式不同。如果您不定义高度，Chrome 就不会尊重纵横比。
@blonfu，是的。毫无疑问，存在浏览器不一致和更精细的级别。

标签： html css flexbox

【解决方案1】：

它正在拉伸，因为align-self 默认值为stretch。将align-self 设置为center。

align-self: center;

在此处查看文档： align-self

【讨论】：

是的，但是其他浏览器会保留图像中的纵横比。 Chrome 也不在 img 中应用 flex-basis
我认为align-self: start; 可能是一个更强有力的答案，因为图像应该垂直对齐到其容器的顶部（而不是中心），就像任何无样式图像（无 css）一样。无论哪种方式，两个答案都可以解决拉伸问题。所以这当然取决于 OP 想要什么——只是没有从 OP 的帖子中得到那种“垂直居中”的印象。
如果您没有在图像上定义宽度并且它位于 flex-container 中，它将拉伸到 100%。 align-self: [flex-start, center...others] 将阻止图像占用 flex-containers 宽度的 100%。 align-self:center 当然可以修复它，但是如果您希望图像从容器的开头或结尾开始，请使用 align-items: flex-start or flex-end
您也可以将align-items: center（或任何适合您需要的对齐方式）放在父级上。
对我不起作用：

【解决方案2】：

关键属性是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>

【讨论】：

【解决方案3】：

我在使用 Foundation 菜单时遇到了同样的问题。 align-self: center; 对我不起作用。

我的解决方案是用 <div style="display: inline-table;">...</div> 包装图像

【讨论】：

不过是关于 flexbox。
这是 flexbox的解决方案。图像和 div 位于 flexbox 容器内。

【解决方案4】：

添加`margin` 对齐图片：

由于我们希望 image 为 left-aligned，因此我们添加了：

img {
  margin-right: auto;
}

同样image 为right-aligned，我们可以添加margin-right: auto;。 sn-p 显示了两种对齐方式的演示。

祝你好运……

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>

【讨论】：

【解决方案5】：

它正在拉伸，因为 align-self 默认值为拉伸。这种情况有两种解决方案： 1. 设置 img align-self : center 要么 2. 设置父对齐项：居中

图像{ 对齐自我：中心 }

或

.父{ 对齐项目：中心 }

【讨论】：

【解决方案6】：

我在制作导航栏时遇到了类似的问题，但以上方法都不适合我。

我的解决方案是为图片添加height: 100%。

如果您要水平对齐项目，请改为添加 width: 100%。

编辑：Chrome 现在似乎默认添加此值，但您需要添加此值以实现兼容性。

【讨论】：

好的，谢谢！这对我有用。但我必须将图像放入包装器中，设置包装器的高度和宽度，然后将图像本身设置为 100% 宽度。

添加margin 对齐图片：

添加`margin` 对齐图片：