Img 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
Solution 1:
add this code to image your code
.cimg{
flex-grow: 1;
object-fit: contain;
flex-basis:100%;
width:100%;
}
Solution 2:
/* CSS */.c {
width: 100px;
height: 100px;
border: 5px solid lightblue;
position: relative;
text-align: center;
}
.cimg {
width: 100%;
}
.cdiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
}<!-- HTML --><!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, user-scalable=yes"></head><body><divclass="c"><imgsrc="https://i.stack.imgur.com/P5N3A.jpg" /><div>text1</div></div></body></html>Solution 3:
My apologies, I misunderstood your question.
There are simpler ways to do this. You could do it with background-image:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><!--mobile friendly--><metaname="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><divclass="c"><div>text1</div></div></body></html>Or you could do it with <figure> & <figcaption>:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><!--mobile friendly--><metaname="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><figureclass="c"><imgsrc="https://i.stack.imgur.com/P5N3A.jpg"><figcaption>text1</figcaption></figure></body></html>Hope this helps!
Post a Comment for "Img Set Flex-grow To Fill Flex Container Rest Space, It Cause Flex Inner Overflow Flex Container"