# Fit image to window/app

**URL:** <https://forums.ankiweb.net/t/fit-image-to-window-app/1592>\
**Category:** Help\
**Created:** [July 30, 2020, 10:37am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592 "2020-07-30T10:37:46Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![BigJonMMXX](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@BigJonMMXX](https://forums.ankiweb.net/u/BigJonMMXX)\
**Post date:** [July 30, 2020, 10:37am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/1 "2020-07-30T10:37:46Z")

</div>

sorry if this has been answered - i cant find it !!

so i’ve just started with anki, making a deck (on my linux laptop), for use be me and my son on our phones…

I used some images with labels to study. what i cant get into my thick head is how to auto size the images. Its frustrating to the point of giving up that we have to scroll each and every card !!! i’ve seen ImageResizer addon, but doesnt seem to work with existing cards, and i have to kkep guessing screen sizes for various devices… three days i’ve been fighting with this…

tl,dr: how do i make an image fit the window/app by height, to avoid scrolling ???

please, anyone got an idiots guide for this ?!?!?!

---

<div class="post-metadata">

**Author:** ![mmdj2](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/mmdj2/32/124_2.png) [@mmdj2](https://forums.ankiweb.net/u/mmdj2)\
**Post date:** [July 30, 2020, 10:48am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/2 "2020-07-30T10:48:06Z")

</div>

add this to your card styling:  
`img {max-height: 500px}`  
you can change `500` to whatever value you want

---

<div class="post-metadata">

**Author:** ![BigJonMMXX](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@BigJonMMXX](https://forums.ankiweb.net/u/BigJonMMXX)\
**Post date:** [July 31, 2020, 7:42am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/3 "2020-07-31T07:42:27Z")

</div>

Thanks, but that doesnt answer my problem. If i make max-height say 200 so it fits nicely on the phone, its too small on the tablet and laptop…

---

<div class="post-metadata">

**Author:** ![mmdj2](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/mmdj2/32/124_2.png) [@mmdj2](https://forums.ankiweb.net/u/mmdj2)\
**Post date:** [July 31, 2020, 7:50am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/4 "2020-07-31T07:50:27Z")

</div>

you can use `%` instead of `px`  
but the `%` only works on width for me, don’t know why (scales the whole images down tho).  
try using this:  
`img {width: 50%}`  
you can change `50` till you find the number that works best for all of your devices

---

<div class="post-metadata">

**Author:** ![mmdj2](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/mmdj2/32/124_2.png) [@mmdj2](https://forums.ankiweb.net/u/mmdj2)\
**Post date:** [July 31, 2020, 8:04am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/5 "2020-07-31T08:04:55Z")

</div>

You can also use this:  
`.mobile img{height: 200px}`  
So the changes would not affect other platforms

---

<div class="post-metadata">

**Author:** ![BigJonMMXX](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@BigJonMMXX](https://forums.ankiweb.net/u/BigJonMMXX)\
**Post date:** [July 31, 2020, 8:05am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/6 "2020-07-31T08:05:30Z")

</div>

Thanks. i give it a try.  
i have just discovered that the max-height doesnt work at all on AnkiDroid (phone). ☹

trying it now…

---

<div class="post-metadata">

**Author:** ![mmdj2](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/mmdj2/32/124_2.png) [@mmdj2](https://forums.ankiweb.net/u/mmdj2)\
**Post date:** [July 31, 2020, 8:06am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/7 "2020-07-31T08:06:25Z")

</div>

This last one works on ankidroid too.  
Just thought of it rn, tested it on ankidroid.

---

<div class="post-metadata">

**Author:** ![BigJonMMXX](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@BigJonMMXX](https://forums.ankiweb.net/u/BigJonMMXX)\
**Post date:** [July 31, 2020, 8:23am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/8 "2020-07-31T08:23:42Z")

</div>

Fantastic. Its all working great.  
Now to build up a new deck (exciting times!)  
Thanks you so much.

summary:  
anki - browse - select card - click Cards - Styling (shared) . . .  
/\* GENERAL CARD STYLE \*/  
.mobile img{height: 300px}  
img {max-height: 400px}  
close window, remember to press Sync !!

---

<div class="post-metadata">

**Author:** ![mmdj2](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/mmdj2/32/124_2.png) [@mmdj2](https://forums.ankiweb.net/u/mmdj2)\
**Post date:** [July 31, 2020, 8:24am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/9 "2020-07-31T08:24:17Z")

</div>

no probelm 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 5:38am UTC](https://forums.ankiweb.net/t/fit-image-to-window-app/1592/10 "2023-05-01T05:38:22Z")

</div>