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:
<figure>
<div class="image-container">
<Image src={src} alt={alt} />
</div>
<figcaption>{caption}</figcaption>
</figure>

<style lang="scss">
@use "../../styles/tokens/_tokens.scss" as t;

figure {
margin-block: 2rem;
}

img {
padding: 1rem;
box-shadow: t.$s-center;
border: 1px solid t.$clr-purple-500;
border-radius: t.$br-large;
background-color: white;
object-fit: contain;
}

figcaption {
margin: 2rem auto 0 auto;
line-height: 1.25;
text-align: center;
}
</style>
<figure>
<div class="image-container">
<Image src={src} alt={alt} />
</div>
<figcaption>{caption}</figcaption>
</figure>

<style lang="scss">
@use "../../styles/tokens/_tokens.scss" as t;

figure {
margin-block: 2rem;
}

img {
padding: 1rem;
box-shadow: t.$s-center;
border: 1px solid t.$clr-purple-500;
border-radius: t.$br-large;
background-color: white;
object-fit: contain;
}

figcaption {
margin: 2rem auto 0 auto;
line-height: 1.25;
text-align: center;
}
</style>
I looked through devtools and I don't have any global styles conflicting with it
No description
4 Replies
vince
vince•15mo ago
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 Lighthouse
briancross
briancross•15mo ago
Weird. I have yet to play with Astro but I’ll keep this in mind.
Myndi
Myndi•15mo ago
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.
vince
vince•15mo ago
Yup
Want results from more Discord servers?
Add your server