Container with image bleeding out while text stays in.
I have a container which max-width so it doesn't stretch too much on big screens. Now I have two columns in which left column is an image and right column is text. I want the image to take all the space available on the left (overflowing the container) and on the right, the text stays in the container (no overflow). How do I achieve this? I have attached screenshot of design for reference.
11 Replies
you forgot to hide the overflow
also, try
object-fit: coverActually this is the output I want. How do I achieve this in HTML and CSS. The image I have attached is the replica of the design I have got. @ἔρως
that's what you want?
Yes
in bootstrap?
Nope
Vanilla CSS
well, do the columns have full width?
Both the columns have same width but they are in the container which have a
max-widthyeah, good luck with that
that won't work
you will have to set that to have 100% width - outside the container
and then, you have to limit the width of the text inside the container
it will be a massive pain to implement
How can I set the width of the text to match other sections and the header in the design?
^ there