为什么flexbox会拉伸我的图像而不是保留宽高比？

156

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>

展开摘要

是什么原因造成的？

我添加了此CodePen来演示我的意思。

html css flexbox

— 西布依斯
source

5

在Firefox和IE中工作正常。在Chrome中，您可以align-self:flex-start 在图像中进行修复。我不知道为什么，也许chrome中的默认值是Stretch。

2

还要增加高度：100％；img解决了这个问题，我想知道为什么它也会拉伸图像。

— Paran0a

3

@blonfu，所有浏览器的默认值为align-items: stretch/ align-self: stretch。如果在每个项目周围添加边框并删除wrap，则会注意到所有项目在所有浏览器中都处于拉伸状态：codepen.io/anon/pen/oLXBVx?editors=1100

— Michael Benjamin

好的，我学到了这一点，但是图像在chrome和其他浏览器中的工作方式有所不同。如果您不定义高度，Chrome不会尊重宽高比。

@blonfu，是的。毫无疑问，存在浏览器不一致和更详细的级别。

— Michael Benjamin

365

正在扩展，因为align-self默认值为stretch。设置align-self到center。

align-self: center;

在此处查看文档： align-self

— pradeep1991singh
source

是的，但是其他浏览器在图像中保留了宽高比。Chrome也不在img中应用flex-basis

9

我认为这align-self: start;可能是一个更强有力的答案，因为图像应像任何无样式图像（无CSS）那样垂直对齐其容器的顶部（而不是中心）。无论哪种方式，两个答案都可以解决问题。因此，这当然取决于OP的需求-只是没有从OP的帖子中获得那种“垂直居中”的印象。

— 蟾蜍

如果您未在图片容器中定义宽度，而是在可弯曲容器中，则它将拉伸到100％。align-self: [flex-start, center...others]将阻止图像占据伸缩容器宽度的100％。align-self:center当然可以修复它，但是如果您希望图像从容器使用的开始或结束开始align-items: flex-start or flex-end

— 编码器

1

您还可以align-items: center在父级上放置（或任何适合您需要的对齐方式）。

— electrovir

16

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

展开摘要

— 多里安
source

1

我在Foundation菜单上遇到了同样的问题。 align-self: center;没有为我工作。

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

— 伊萨皮尔
source

2

它是关于flexbox的。

这是 flexbox的解决方案。image和div在flexbox容器中。

— isapir

0

新增中 `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>

展开摘要

— 阿卡什
source

0

它是拉伸的，因为“自我对齐”的默认值为“拉伸”。这种情况有两种解决方案：1.设置img align-self：center或2.设置父align-items：center

img {

   自我调整：居中
}

要么

.parent {
  align-items：居中
}

— 穆罕默德·阿里
source

为什么flexbox会拉伸我的图像而不是保留宽高比？

新增中 margin以对齐图像：

新增中 `margin`以对齐图像：