Broken images do not respect css?
I am using a headless cms approach, and my backend got hacked -.-
I noticed something: when image links are broken, besides the obvious effect of them not appearing, they won't respect our CSS.
I am using grid, I am setting img as block and the whole max-width 100% thing, and I tested with huge placeholder images, but they fit as I would expect. Broken links generate overflow though.
Why is that? Is there a workaround?
7 Replies
they respect css, but the max-width of 100% is meaningless
its 100% of what? the image doesnt have intrinsic size anymore, and the parent is probably relying on the child for it's width
so, we have a chicken and egg situation with widths
try setting a sensible width and height, or use kevin's reset for images (which doesnt rely in max-width)
Oh, the structure is
There is a section that gets 100% of the page
A div that is a container set to 95% + margin auto
thena div that is a grid, with template columns 1fr 1fr 43%.
Then a div that is a wrapper for the img. So the ima is 100% of its parent, that lives inside of a grid. That works for any size of image
then can you make a codepen?
also, it still sounds like it works for any size of image that loads, but not one that doesn't load and has no intrinsic size
I show you the site!
It's in the Our Solution section
https://pfwces.netlify.app/
Power From Within
Astro description
there's some funky stuff going on
but if you try to change the image to a placeholder, you can see that the size of the image respects it
however, the size is being calculated based on a 1:1 aspect ratio o.O
but shows with the aspect ratio of the image O.o
The aspect ratio follows the grid, actually
For some reason adding a placeholder of any size will behave as I would expect. Without an image it behaves weirdly, that's what's bugging me
i believe it's the lack of a natural size
(i said "intrinsic" before, which is the correct term, but it means something different in CSS)