为什么 height:auto 不适用于此图像？答案

【问题标题】：Why is height:auto not working for this image?为什么 height:auto 不适用于此图像？
【发布时间】：2019-11-01 10:49:52
【问题描述】：

我有一个 flexbox 容器，里面有两个 flex 项。一个是图像，另一个是段落。我一直在尝试通过提供 width:some-percentage 和 height:auto 来按比例调整图像大小，但它不起作用。请帮我解决这个问题。

.item{
  display:flex;
}
img{
  width: 25%; /* not working */
  height: auto;
}

<div class="item">
  <img
  src=
  "https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
  <p>some paragraph</p>
</div>

JSFiddle 链接 - https://jsfiddle.net/dizzyramen/xfot3Lwv/2/

【问题讨论】：

在图像上使用 align-self: flex-start - 这是因为 stretch 是默认行为（align-items 在 flex 容器 上或 align-self在 flex 项上）...见jsfiddle.net/947uqszj
@kukkuz 它正在工作！非常感谢

标签： css flexbox

【解决方案1】：

弹性容器的默认设置是align-items: flex-start。

在行方向容器中，这会使没有定义高度（例如height: auto）的弹性项目扩展容器的整个高度（full explanation）。

然而，在这种特殊情况下，图像被拉伸到最大，并随之扩大了容器的大小。

解决方案是在容器上设置高度限制，或者用容器上的align-items: flex-start 或项目上的align-self: flex-start 覆盖默认值。

jsFiddle demo

.item {
  display: flex;
}

img {
  width: 25%;
  align-self: start; /* new */
}

<div class="item">
  <img src="https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg" />
  <p>some paragraph</p>
</div>

【讨论】：

【解决方案2】：

这是因为，默认情况下标签<img>是内联的。您需要将其更改为阻止或弯曲

【讨论】：

Sergio，您无法控制弹性项目的 display 值。一旦你将一个元素变成了一个弹性容器，弹性项目上的display 属性就由弹性算法控制。浏览器会忽略在弹性项目上设置display 规则的尝试。因此，将img 的display 值更改为block 或flex 并不重要。
在此处查看我的答案底部以获取更多详细信息：stackoverflow.com/a/52471797/3597276

【解决方案3】：

这里是另一种选择：

将您的 img 包装在 div <div class="image-wrapper"> 中并设置管理此节点中的宽度。
将width: 100%; height: auto; 分配给img，以便根据其父级按比例调整。
在这里，您可以在 sn-p 中找到它。希望对您有所帮助。

<div class="item">
    <div class="image-wrapper">
        <img
            src=
  "https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
    </div>
    <p>some paragraph</p>
</div>

<style>
.item{
  display:flex;
}
.image-wrapper {
  width: 25%; /* means 25% of .item */
}
img{
  width: 100%; /* means 100% of its parent .image-wrapper */
  height: auto;
}
</style>

【讨论】：

我想我理解这种方法，但为什么 .image-wrapper 的宽度变得那么大，以至于你不得不使用 width:25%？
如果你没有给一个div设置一个特定的宽度，例如.item，这个div有一个默认的显示块，会填满所有的水平空间。
问题的一个重要部分是为什么 height: auto 不起作用。