Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

is-NxN does not respect height=N #3792

Open
leolivier opened this issue Apr 20, 2024 · 0 comments
Open

is-NxN does not respect height=N #3792

leolivier opened this issue Apr 20, 2024 · 0 comments

Comments

@leolivier
Copy link

leolivier commented Apr 20, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant