anki

Notion2Anki: Removing Image Stretching in Anki

Fix image stretching from Notion2Anki using this one line of code!

David Liu

Oct 23, 2020 • 1 min read

4:26 for a demonstration of how to do this

Notion2Anki is amazing for converting Notion documents into Anki flashcards, but one of the problems I came across was that images were getting all stretched out of shape to Anki to the point where they became unreadable.

There's an elegant solution for this. I spent several hours creating a Python script, but it turned out to be completely unnecessary, the problem solved by simply adding a single paragraph of CSS to the Anki cards.

<style> 
img { 
object-fit: contain;
}
</style>

You need to add this to the card styling in Anki.

Menubar -> Tools -> Manage Note Types -> select Notion2Anki -> Cards... -> then add the above code to the sections in this screen as shown.

This fixes the image stretching problem that Notion2Anki introduces to your cards. A delightfully low effort solution!

Sign up for more like this.