Hello! 👋 Thanks for logging this issue. Please remember we are all volunteers here, so some patience may be required before we can get to the issue. Also remember that the fastest way to get resolution on an issue is to propose a change directly, https://github.com/ankidroid/Anki-Android/wiki/Contributing

For anyone having this issue, changing the styling template to this works. It's a hacky solution but it does the job:

#image-occlusion-canvas {
    --inactive-shape-color: #ffeba2;
    --active-shape-color: #ff8e8e;
    --inactive-shape-border: 1px #212121;
    --active-shape-border: 1px #212121;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: auto;
    object-fit: contain;
}

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

#image-occlusion-container img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: auto;
    object-fit: contain;
}

Here is what Damien has to say on this issue:

The styling for each client will be different, so I think this should be styled by each client separately instead of done in the core code. AnkiMobile already injects its own styling so that the image appears correctly for it.

Here is what Damien has to say on this issue:

The styling for each client will be different, so I think this should be styled by each client separately instead of done in the core code. AnkiMobile already injects its own styling so that the image appears correctly for it.

Thanks! Good first issue to apply the CSS provided above

Hey, Im currently also looking into this and for some reason Im either unable to reproduce it or to stupid. Maybe you can help me out.
Details: Im using the 2.17alpha16 on a samsung galaxy s20.
For me the images are fit nicely to the screen.

To reproduce this, the phone needs to be in the landscape mode. Probably, you are trying to reproduce it in the Portrait mode.

So this one is in landscape mode. Id say is rather big than too small. Or does the problem only occur with the native occlusion?

Or does the problem only occur with the native occlusion?

Yes. As mentioned in the original post, it occurs only with the native IO cards.

Id say is rather big than too small.

Probably, we should find a middle way between the current size in native IO cards and the size in add-on generated IO cards.

Hi, I was starting to look into this issue and was able to reproduce it. I tried adding the afore mentioned css styling to the "flashcard.css" file to fix it, but unfortunately it does not seem to solve the problem, it just shifts the image to the left without changing the size.

Am I missing something obvious here about the place where the android specific styling should happen?

I'm looking into this as my first issue! I've already replicated it think I have an idea of things to try on Anki Android to fix this issue, seen as tough it only seems to happen to me with certain image sizes. Could I have this assigned to me?

Hello! I'd like to give some updates regarding this issue, seen as though I've already fixed the main bug but am now facing another which I'm struggling to consider how to fix.

The CSS provided earlier in this thread works! But only if you !important the #image-occlusion-container img properties. However, a downside I wasn't expecting was that the occlusion itself now seems to be deformed.

The div containing the Occlusion doesn't have any id so I was not sure how to proceed.
<div style="display: none">{{cloze:Occlusion}}</div>
Should I add an id to that div, so that I can style it along with other #image-occlusion-container img class, ensuring it stays in place?