why does an image spill out of a container even with padding on the container set?
just a general question on why something like this happens
12 Replies
You will need to provide some code as its not as cut and dry as you may think it is.
k
We can assume you have a hard value for height/width (which you should with images as attributes). So you need to either put a
max-width: 100% on it or handle appropriatelyi have a max-width
container:
display: flex; justify-content: space-between; padding: 8% 8%; background-image: url(bg-img.jpg); background-size: cover; background-repeat: no-repeat; position: relative; isolation: isolate; gap: 8%;
display: flex; justify-content: space-between; padding: 8% 8%; background-image: url(bg-img.jpg); background-size: cover; background-repeat: no-repeat; position: relative; isolation: isolate; gap: 8%;
This is why code is so important cause now we are talking about a Background-image
image container(first one) and image:
.hero-container .hero-img {
display: flex;
justify-content: flex-end;
flex-basis: 60%;
}
.hero-container .hero-img img {
width: clamp(30rem, 100%, 40rem);
height: auto;
}
no not a background image
put it in a codepen is best fyi
lemme remove that
but theres so much other code i need to write to replicate the situation
but ok ig
or maybe i can just send the file
You can either create more work for the person helping or less.
The idea of giving a working demo allows people to jus tackle your issue. Without extra steps. This also eliminates lots of assumptions tbh.
Like you said you have a max-width but then show us* a class with
width: clamp(30rem, 100%, 40rem);how do you use images in codepen
i tried linking with external websites but it wasnt working out for me
I typically just use filler from
https://picsum.photos
You can link any external images with a fully hosted url though
like if they are on github you can get the raw link and use itk thx
i actually think ill tackle this problem another day, so adios