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

最佳答案

Flex容器的默认设置为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>

关于css - 为什么height:auto不适用于此图像?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56655095/

10-12 12:57
查看更多