Make image take full height and width
Hi, I want the red box to take full space around it, as image is the second child of the flex and specially I want it to take full height, how can I do this? check the code below:
https://codepen.io/hamzacodepen951/pen/poQqKrV
8 Replies
Try doing this
Set the width and height of those containers to 100%.
.text-hero{
width: 100%;
height: 100%
}
.img-hero{
width: 100%;
height: 100%
}
That will make the containers take equal and full width and height of the container wrapping them.
Before that set the img to take 100% width and height of it's container.
not working
could you please try on the code?
Really? I tried it on the code it worked. Let me try again
It didn't work because you didn't delete the previous declaration and because the declaration is after your
.herotext, .heroimg{
width: 100%;
height: 100%;
}
declaration, it overrides it.
is that possible that .herotext and .heroimg take 60% and 40% width respectively and then image contain rest of the area?
Like this, it should take the area below it and image cover all the brown area I have drawn.
Oh ok. I thought you wanted it equal. Just leave it at 60% and 40% width just like you did.
You specified 100% for the height of the children element container but didn't specify height of the parent element. Try that. Make sure your image is taking 100% height of the .hero__img.