Display images at original size

[arjuna]

hi,
i searched and found several answer to this, none of them did it for me though. please bear with me, i am new here.

i want anki to show the image exactly at the size it has (see screenshot attached). I tried to include

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

to the card, but it didn’t work. i might need more detailed instructions (for dummies) where to add this.

please see screnshot attached, how my anki blows up the images. on the left you see irfanview at 100%. on the right side you see the enlarged image in anki

please help!
miguel

[Hildeguard]

Hello @arjuna

Maybe try something like this:

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

This is also suggested in the documentation.

Hope this helps!

[arjuna]

Hi Hildeguard,

thanks for your response. I tried that yesterday (Anki still enlarging the pics).
However, your comment pushed my to try on more time, and

img {
max-width: 300px;
max-height: 300px;
}

seems to be working on big screen for now. Thanks!

[Hildeguard]

Mhh thats odd

Maybe try this instead:

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

As far as i can tell, this should keep your images at the original resolution. But maybe i’m missing something.

If that does not work, and you want to get to the bottom of the issue, i think its time to install the AnkiWebView Inspector Addon and inspect the image element.

If the original resolution is not as important to you, than your max-width: 300px + max-height: 300px could be adapted for Smartphones running Ankidroid / AnkiMobile by something like this:

.mobile img {
  max-width: 400px;
  max-height: 400px;
}

If you want to specifically target small screens that are not using Ankidroid / AnkiMobile (for e.g. small Laptop screens), you could use something like this:

@media (max-width: 600px){
   max-width: 250px;
   max-height: 250px;
}

Or you can try using relative units, for e.g

img {
  max-width: 25vw;
  max-height: 25vh;
}

should always keep your image at 25% of the screens width / height.

Ok, sorry for this wall of text In CSS there are a lot of ways to style things and i’ve not mentioned all of them.

All the values are obviously just examples, use smaller / bigger values depending on your desired effect.

Cheers!