img 设置 flex-grow 填充 flex 容器剩余空间，导致 flex 内部溢出 flex 容器 [英] img set flex-grow to fill flex container rest space, it cause flex inner overflow flex container
本文介绍了img 设置 flex-grow 填充 flex 容器剩余空间，导致 flex 内部溢出 flex 容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的代码，text1"；溢出 flex 容器，我希望 flex 容器中的 img + text 和 img 填充 flex 容器休息
following is my code, "text1" overflow the flex container, I expect img + text in flex container and img fill flex container rest
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
.c {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
border: 5px solid lightblue;
}
.c img {
flex-grow: 1;
object-fit: contain;
}
</style>
</head>
<body>
<div class="c">
<img src="./img.jpg"/>
<div>text1</div>
</div>
</body>
</html>
结果是:
如果元素不是 img 并且是 div，flex-grow: 1 将填充 flex rest 空间，我很困惑为什么 img 会导致内部溢出
if element is not img and is div, flex-grow: 1 will fill flex rest space, I'm confused why img cause inner overflow
以下是我的img.jpg"
following is my "img.jpg"
推荐答案
/* CSS */
.c {
width: 100px;
height: 100px;
border: 5px solid lightblue;
position: relative;
text-align: center;
}
.c img {
width: 100%;
}
.c div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
}<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<div class="c">
<img src="https://i.stack.imgur.com/P5N3A.jpg" />
<div>text1</div>
</div>
</body>
</html>这篇关于img 设置 flex-grow 填充 flex 容器剩余空间，导致 flex 内部溢出 flex 容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
