bulma Scale image to container

Question

I followed the documentation example and have this inside a media object:

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/128x128.png">
</figure>

I use that as part of a card for a display of multiple elements.

The problem is that when an image is uploaded which is not squared (meaning the ratio is not 1:1), the image overflows the container effectively breaking the layout.

Is there any way to fix this in bulma?

Allspice

could you solve this issue ? – Keeshakeeshond

No, I had to write the CSS to force the image to that size. – Allspice

Answer 1

Basic CSS can solve this, use object-fit: cover; on the image.

Belomancy

Answer 2

I centered the image inside the 128x128 area like this:

<figure class="is-flex is-align-items-center is-justify-content-center image is-128x128">
  <img src="https://bulma.io/images/placeholders/480x640.png">
</figure>

<figure class="is-flex is-align-items-center is-justify-content-center image is-128x128">
  <img src="https://bulma.io/images/placeholders/640x480.png">
</figure>

Then I added this css override:

.image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

Orfield

Answer 3

If you give the <figure> tag the class "is-square", probably this might fix your issue.

It scales the container to the size of the image but on the other hand the image doesn't look good because of the ratio.

<figure class="image is-128x128 is-square">
  <img src="https://bulma.io/images/placeholders/128x128.png">
</figure>

Djambi