8 replies

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

KP-C

Kevin Powell - Community•3y ago•

8 replies

vince

Image height

<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

Image height

Similar Threads

Image height

Similar Threads

Similar Threads

Similar Threads