img max width

marc.mars's Avatar

marc.mars

05 Jun, 2018 09:39 PM

Hi all,

I've added some lines to the CSS-section:

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;

margin-left: auto;
margin-right: auto;
width: 500px;
img {max-width: none; max-height: none;}
}

I like to use anki in fullscreen, but still want to have reasonable margins for the text, that's why.

Now, I would like to have my images shown with their maximum height and width. So I tried to add this line:

anki img { max-width: none; max-height: none; }

This works for the size of the images, but my problem is that they are not centered. The left margin is aligned to the left margin of the correspondend text of a card. If possible, I'd like to have the center of the image aligned to the center of the paragraph above or below the image.

Does anybody has a solution?

  1. 1 Posted by marc.mars on 05 Jun, 2018 10:36 PM

    marc.mars's Avatar

    Sorry there's a mistake in my post. That's what I added:

    img {max-width: none; max-height: none;}
    

    So all in all I would have:

    .card {
     font-family: arial;
     font-size: 20px;
     text-align: center;
     color: black;
     background-color: white;
    
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    img {max-width: none; max-height: none;}
    }
    img {max-width: none; max-height: none;}
    
  2. Support Staff 2 Posted by Damien Elmes on 06 Jun, 2018 06:45 AM

    Damien Elmes's Avatar

    I'm afraid I can't provide official support for HTML/CSS, so I'll move your question to the community section. Please note that the line before the } is invalid, and should be removed.

  3. 3 Posted by marc.mars on 10 Jun, 2018 08:50 AM

    marc.mars's Avatar

    Finally, I've found a solution.

    As far as I understand, in Anki text and images are somehow put together on the HTML level. So a key command for this problem, as someone told me, is:

    #qa {
    width: 100%;
    }
    

    Now my front template looks more or less like that:

    <div>
    {{Front}}
    </div>
    <br>
    {{Front Image}}
    

    I've created a field {{Front Image}} for my images, as you can see.

    And the Styling section contains following commands:

    .card {
     font-family: arial;
     font-size: 20px;
     text-align: center;
     color: black;
     background-color: white;
    }
    
    #qa {
    width: 100%;
    }
    
    div {
    margin: 0 auto;
    width: 500px;
    }
    
    img {
    display: block;
    max-width: 1300px;
    margin: 0 auto;
    }
    

    Now I can use the fullscreen mode with a centered text block which is 500px large and centered images larger than 500px.

    There are still some minor problems (when I use more than one image), but all in all it works fine.

    That's it.

Comments are closed, but you can start a new discussion.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac