为什么flexbox会拉伸我的图像？

Question

Flexbox具有将图像拉伸到其自然高度的行为。在其他（更具体的）单词中，如果我有一个带有子图像的flexbox容器，并且我调整了该图像的宽度，则高度根本不会调整大小并且图像会被拉伸。

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

这个样式表

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

我添加This codepen来证明我的意思。 是什么原因造成的？

Answer 1

由于align-self默认值为stretch，因此正在拉伸。 将align-self设为center。

align-self: center

请参阅此处的文档： align-self

Answer 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>

Answer 3

我在基金会菜单上遇到了同样的问题。 align-self: center;对我不起作用。

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

包装图像

Answer 4

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

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

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

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

Answer 5

添加margin以对齐图片：

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

img {
  margin-right: auto;
}

同样image为right-aligned，我们可以添加margin-right: auto;。该片段显示了两种对齐类型的演示。

祝你好运......

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>

Answer 6

将显示块用于flex容器内的图像

Answer 7

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

img {

   align-self: center
}

OR

.parent {
  align-items: center
}