flex子元素，插入img设置高度100%，宽度超出

flex的子元素div继承了父元素的高度。在子元素插入图片设置图片高度为100%，图片的高度填满父元素，但是宽度超出。请问这是为什么？如何解决？

flex子元素，插入img设置高度100%，宽度超出

<body>
<div>
<div>
<img src="https://segmentfault.com/static/imags/voidlogo.jpg">
</div>
</div>
</body>

回答

当你设置height:100%的时候会根据父元素的height来设置高度，但是这里没有明确设置height，但是又设置flex，再flex下面的子元素的高度是和父元素的高度一致的。所以这里设置height:100%，高度显示是正常的.
个人认为应该是以下原因导致的。
1、img查找父元素的height发现是auto于是按原长度显示，这时将父元素撑开了
2、flex生效将子元素的高度拉伸压缩到设置了flex元素的高度
3、img更新视图，高度和父元素同步，但是被撑开的img父元素没有还原，所以会出现这种情况
解决：
img父元素设置height:100%，就是再第一步找到了父元素的height就可以了

以上是 flex子元素，插入img设置高度100%，宽度超出 的全部内容， 来源链接： utcz.com/a/100139.html

回到顶部