Open leolivier opened 1 month ago
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
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.
use the html above with a 225x300 image
I would expect that is-NxN provide an image which max size is N in both directions, not only width
Only the width is max size N
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
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:
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