Kevin Powell - Community•16mo ago

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

4 Replies

vinceOP•16mo 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•16mo ago

Weird. I have yet to play with Astro but I’ll keep this in mind.

Myndi•16mo 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.

vinceOP•16mo ago

Yup

Gaming

Programming

Image height