jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
48.77k stars 3.93k forks source link

is-NxN does not respect height=N #3792

Open leolivier opened 1 month ago

leolivier commented 1 month ago

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [1.0.0] My browser is: Firefox (but I tested on Edge too) I didn't find any duplicate

Description

When using

<figure class="image is-128x128">
   <img src="{{gallery.cover.thumbnail.url}}">
   <figcaption>{{gallery.name}}</figcaption>
</figure>

with a rectangular image (size 225x300), the width is 128 and the height is 170. The css for is-128x128 and img (from bulma-min.css, as provided by the browser) are:

.image.is-128x128 {
    height: 128px;
    width: 128px;
}
.image img {
    display: block;
    height: auto;
    width: 100%;
}
img {
    height: auto;
    max-width: 100%;
}

If I put width:auto on .image img and max-height: 100% on img, then the height becomes 128 and the width is decreased to keep the ratio.

Steps to Reproduce

use the html above with a 225x300 image

Expected behavior

I would expect that is-NxN provide an image which max size is N in both directions, not only width

Actual behavior

Only the width is max size N