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

figure element together with image classes with img #3794

Open
ruwentos opened this issue Apr 21, 2024 · 0 comments
Open

figure element together with image classes with img #3794

ruwentos opened this issue Apr 21, 2024 · 0 comments

Comments

@ruwentos
Copy link

ruwentos commented Apr 21, 2024

It is a bug or I do need help.

This is about the Bulma CSS framework

As you already know, there is a problem with showing images in an figure element with the image classes.
I have seen this question here a few times but there was no answer to it.
It would be very kind to solve this now once and for all or just say clearly that you know about it, but you just don't have a solution for it.
Thank you in advance.

Steps to Reproduce

This is all code there is.

<html>
  <head>
    <title>This is the title of the webpage!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  </head>
  <body>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <div class="navbar-item">            
                <figure class="image is-96x96">
                <img src="../src/pics/doppelkopf-pic-2.png" alt="Hallo Ballo"/>
                </figure>            
            </div>
        </div>
    </nav>
  </body>
</html>

In the browser the figure with the right measures is there, but the pic (what has a 1:1 ratio) appears warped.
Then I changed the figure class to image is-1by1 (because it has ratio 1:1).

   <figure class="image is-1by1">
   <img src="../src/pics/doppelkopf-pic-2.png" alt="Hallo Ballo"/>
   </figure>

Then the picture disappears.

Expected behavior

It should be possible to fill the figure element with the picture.

Progress

If I leave the 'navbar-item' class out of it, it seem to work as expected.
I don't know if this is as it should work. But in the doc there is always a 'navbar-item' inside a 'navbar-brand' suggested.

<html>
  <head>
    <title>This is the title of the webpage!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  </head>
  <body>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <!-- <div class="navbar-item"> -->
            
                <figure class="image is-96x96">
                <img src="../src/pics/doppelkopf-pic-2.png" height="96" alt="Hallo Ballo"/>
                </figure>
            
            <!-- </div> -->
        </div>
    </nav>
  </body>
</html>
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