Image height
I'm probably being really stupid about this, but I have the following problem (see attached image)
It's just a simple image with object-fit: contain on it, but for whatever reason it keeps adding an insane amount of white space to the top and bottom. The amount of white space varies on each different image.
All I want it to do is stretch to fit the container, and take whatever height it needs to.
Here's my component:
I looked through devtools and I don't have any global styles conflicting with it
4 Replies
Ah I see the issue. It's with Astro's
Image
component. I used a regular img
and it works as expected. I don't see any styling added in devtools though...
Ahhhh I see. It's because my image is huge, so Astro during build time is adding the width & height attributes according to the image size, rather than it's calculated size with css.
This honestly sucks for DX though 😅
Since my image size is huge, I'd either have to crop it down so that Astro sets the proper width/height attributes for CLS, or I have to see the computed size in my browser and then manually add the width/height dimensions myself
At this point I think I'm better off just using a regular img
tag, though I'll lose some performance points in LighthouseWeird. I have yet to play with Astro but I’ll keep this in mind.
Are you using the new Astro component?
For reference always declare
width
, height
, alt
using those. They're a hassle to work with sometimes becuase there's so much "behind the scenes" type of work.Yup