How to get image resizing to work separately for landscape and portrait views

Card Design
1

From the Anki manual :

Anki shrinks images to fit the screen by default. You can change this by adding the following to the bottom of your styling section (outside of the default .card { … }):

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

I’ve recently gotten this coding to work. I’ve been using something along the lines of :

img {
max-width: 60vw;
max-height: 40vw;
}

I’ve also experimented a bit with how % and px work replacing the vw with them. Vw seems to work a bit better than %.

When I resize the viewing pane horizontally I see immediate results when using vw. I don’t get results when I resize the viewing pane vertically. At first I thought that max-height doesn’t have an effect but it can affect the size of the image according to some vertical area that I can’t see, the size of which I don’t know how is determined.

MAIN QUESTION

I design my cards to have a horizontal view and a portrait view using this coding in my styling card :

/* MEDIA QUERY */
/* ignores element in landscape mode */
@media only screen and (orientation:landscape) {
.land {
display: none;
}
}
/* ignores element in portrait mode */
@media only screen and (orientation:portrait) {
.port {
display: none;
}
}

Is there a way for :

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

: to work differently for landscape view and for portrait view. Having one set of sizing parameters for both views doesn’t work well.

I tried internal style coding by giving different styling instructions for the landscape and portrait views and although that would work, it wouldn’t work separately for two sets of instructions, one for horizontal view and the other for portrait views.

<style>
img {
max-width: 20vw;
max-height: none;
}
</style>

I even added the view orientation specification to the sizing commands and that didn’t make a difference.

<style class= "port">
img {
max-width: 20vw;
max-height: none;
}
</style>
2

I’m not sure if I understand your question correctly, but I guess what you are looking for is something like the following:

Styling:

@media (orientation: landscape) {
    .card {
        background: lightskyblue;
    }
    img {
        max-width: none;
        max-height: 20vh !important;
    }
}
@media (orientation: portrait) {
    .card {
        background: violet;
    }
    img {
        max-width: none;
        max-height: 90vh !important;
    }
}

Demo movie (Anki PC and AnkiDroid):

@media_orientation_ffmpeg
@media_orientation_ffmpeg1008×790 3.05 MB

1 Like
3

Minus all my chatter, what I basically wanted was a way to apply image resizing differently to landscape view and portrait view. Your response allowed me to do that.

It didn’t occur to me to plug the image resizing coding directly into the horizontal-portrait differentiating coding, which is what you did and which was what I was looking to do.

Thank you

4