为什么Flexbox会拉伸我的图片而不是保持宽高比？

Question

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>

这是什么原因造成的？

- sjbuysse

---

在Firefox和IE中表现正常。在Chrome浏览器中，您可以使用 align-self: flex-start 来修复图像的显示。我不知道为什么，可能是因为Chrome的默认值是stretch（拉伸）。 - user4994625

同时将 height: 100%; 添加到 img 中可以解决问题，我想知道为什么它会拉伸图像。 - Paran0a

@blonfu，在所有浏览器中的默认值是 align-items: stretch / align-self: stretch。如果你在每个元素周围添加边框并移除 wrap，你会发现所有元素都会在所有浏览器中被拉伸：http://codepen.io/anon/pen/oLXBVx?editors=1100 - Michael Benjamin

好的。我学到了，但是在Chrome和其他浏览器中，图像的工作方式不同。如果您不定义高度，Chrome将不尊重纵横比。 - user4994625

@blonfu，是的。毫无疑问，浏览器存在不一致性和更细粒度的级别。 - Michael Benjamin

Answer 1

因为 align-self 的默认值是 stretch，所以它会拉伸。

将 align-self 设置为 center。

align-self: center;

查看此处的文档： align-self

- pradeep1991singh

---

是的，但其他浏览器保持图像纵横比。Chrome不会在img中应用flex-basis。 - user4994625

我认为 align-self: start; 可能是一个更好的选择，因为图片应该垂直地对齐到它们容器的顶部（而不是居中），就像没有 CSS 样式的普通图片一样。两种方法都可以解决拉伸的问题。当然，这取决于 OP 想要什么 - 我只是没有从 OP 的帖子中得到“垂直居中”的印象。 - toad

如果您在 flex 容器中未定义图像的宽度，则其将被拉伸到 100%。align-self: [flex-start, center...others] 可以防止图像占用 flex 容器的 100% 宽度。当然，align-self:center 可以解决这个问题，但如果您想让图像从容器的开头或结尾开始，请使用 align-items:flex-start 或 flex-end。 - Clifford Fajardo

您还可以在父元素上添加 align-items: center（或任何符合您需求的对齐方式）。 - derpedy-doo

对我不起作用：<img src="FILE.jpg" class="" style="align-self: center; width:100vw; height:70vh;"> - David Spector

我真的不明白为什么添加align-self: anyvalue;就能解决问题。有人可以解释一下吗？ - Daniel_Ranjbar

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>

- Dorian

Answer 3

在制作我的导航栏时，我遇到了类似的问题，但以上方法都没有解决。

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

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

编辑：现在Chrome似乎默认添加了此值，但为了兼容性，您仍需要添加它。

- Jongwoo Lee

---

是的，谢谢！这对我有用。但我必须把图像放在一个包装器中，设置包装器的高度和宽度，然后将图像本身设置为100％宽度。 - Embedded_Mugs

Answer 4

因为align-self默认值为stretch，所以图片出现了拉伸。 有两个解决方法： 1.设置img的align-self属性为center 或者 2.设置父元素的align-items属性为center

img {
align-self: center
}

或者

.parent {
  align-items: center
}

- mohamed ali

Answer 5

添加 margin 来对齐图片：

因为我们想要将 image 左对齐，所以我们添加了：

img {
  margin-right: auto;
}

同样地，要使image右对齐，我们可以添加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>

- Aakash

Answer 6

使用以下CSS设置之一：contain或cover最受欢迎。

.my-img {
  object-fit: contain;
}

或者

.my-img {
  object-fit: cover;
}

- Xin

Answer 7

我在使用 Foundation 菜单时遇到了同样的问题。对我来说，align-self: center; 无法解决这个问题。

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

- isapir

---

这是关于flexbox的。 - user9016207

这是一个Flexbox的解决方案。图像和div位于Flexbox容器内部。 - isapir

Answer 8

我曾经遇到过类似的问题，我的解决方案是在图像中添加flex-shrink: 0;。

- Nicole Garcia