Bulma: [Request] Bound Non Square Image to 128x128 Box

[Laraveldeep]

I am using Bulma v0.7.1.

While images with ratios is bounded to the defined image box, fixed sized (avatar) images is not bounded unless it is perfectly square.
I have tried to use that for user profile and users don't always upload perfectly square image. If image rectangle, it comes out of the box.

Is it possible to bound the image inside fixed image class regardless of shape?

Thanks

[VizuaaLOG]

I don't believe this is possible with an image element, you'd have to stretch the image. You could either:

1. Crop the image during upload, on your server.
2. Or you could apply the avatar via CSS via background-image and apply I think it's background-size: cover which will resize and crop the image to ensure it fills the space.

Semantically the second option isn't ideal, as you're removing the physical image element. If possible I would recommend option 1, it may require more work but I think it'll save you a headache moving forward.

[Laraveldeep]

I am using responsive images with ratios also. That works out of the box.
Can't this be done for fixed square images (plus retina image) also?

[danswiser]

I've been using object-fit: cover and height:100% in my projects. It seems to work almost all the time for me.

.image img { height: 100%; object-fit: cover; }

[Laraveldeep]

Ya this works.

However I was expecting to touch css less. :)