Hello,
My daughter uses anki and the front side often consists of an image. She showed me that she always needs to scroll on her tablet to see the full image which annoys her. So I added the recommended
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
to the css but it did not help. I then changed from 100% to 70% and it works fine.
Can this be related to the different screen resoltions? I changed the setting on her laptop which has a resolution of 2880 * 1800 while the tablet on which she views the cards has a resolution of 2560 × 1600. If that is the reason for the problem, is there a way to define 100% for each screen on which she views the cards? Or which size could the images be realistically since the card needs some frame around it at least? 95% or less?
Thanks!
The persentages set size relative to the template element the image is placed into, which in turn depends on its own styling and the rest of the elements on the card. So you need to consider the layout as a whole for the exact numbers to have any meaning. Feel free to share the full code for your note type if you need help with that.
One way to link styles to the screen size is to use media queries. Another would be using viewport units. What solution would fit your case better again depends on your template as a whole.
This depends on the rest of the info on your card and the space it can occupy. There can’t be one magic number for every case, obviously. If there is text on the card that takes 90% of the screen, the image will have to be more constrained than when the screen is completely free for the image alone.
Thank you. I never heard of Anki before, so I just looked for a quick fix and found the working solution that way but was confused as to why I need 70%.
Regarding media queries: I had assumed Anki would execute them on each device and then use the settings in the css of the cards accordingly. I can add a media query to the css then.
The template as a whole is very basic, just what was already defined by Anki themselves plus the size adjustment I added:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
}
}
Many of the cards she uses are just the image on the front page, usually one page out of a pdf that highlights some points she needs to learn and then she writes the answers on the back as text. So it is completely free for the image. Therefore, I wanted to know how much of the 100% the card layout itself needs so that I could use the actually available space, be it 90, 95 or however many percentage of the card is left for the image.