Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
8 replies
vince

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>


I looked through devtools and I don't have any global styles conflicting with it
image.png
Was this page helpful?