Question

我有一个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/

Answer 1

这是另一种选择：

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

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

Answer 2

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

在行方向容器中，这会使没有定义高度（例如height: auto）的flex项目扩展容器的整个高度（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>

Answer 3

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

为什么height：auto不适用于此图像？

3 个答案: