0
131
Vistasimg set flex-grow to fill flex container rest space, it cause flex inner overflow flex container
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>
the result is:
if element is not img and is div, flex-grow: 1 will fill flex rest space, I'm confused why img cause inner overflow
following is my "img.jpg"
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
add this code to image your code
.c img{
flex-grow: 1;
object-fit: contain;
flex-basis:100%;
width:100%;
}
·
Juan Pablo Isaza
Denunciar
0
/* 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>
·
Juan Pablo Isaza
Denunciar
0
My apologies, I misunderstood your question.
There are simpler ways to do this. You could do it with background-image:
<!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;
background-image: url('https://i.stack.imgur.com/P5N3A.jpg');
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div class="c">
<div>text1</div>
</div>
</body>
</html>Or you could do it with <figure> & <figcaption>:
<!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;
width: 100px;
height: 100px;
position: relative;
}
figcaption {
color: white;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<figure class="c">
<img src="https://i.stack.imgur.com/P5N3A.jpg">
<figcaption>text1</figcaption>
</figure>
</body>
</html>Hope this helps!
·
Juan Pablo Isaza
Denunciar
Responde la pregunta