Opening images when reviewing -feature request-

[Axiome]

sometimes i use some diagrams like this

but i can’t see the text clearly , in some cases the diagram is so complex that on desktop i don’t see anything

i hoped that we can have a kind of image viewer, where we can zoom in or out in pictures after we click on them
or something like what we have on the mobile version where we can zooming by pinching our fingers outward
if there is an addon, it will be so helpful to mention it please

am using
anki 2.1.57
windows 10
have a nice day

[Axiome]

NB: zooming in on desktop will not change the size of the image

[jcznk]

Try checking this: Styling & HTML - Anki Manual

In short, by adding the following code to the styling section of your template, you should be able to change the size of the image when zooming on desktop.

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

---

Edit: you could also try using the following code (add it to the styling section). It allows you to zoom an image after clicking on it. The image remains zoomed as long as you do not move the mouse away from it.

html:not(.mobile) img:hover {
  cursor: zoom-in;
  transition: .5s;
  transition-delay: 180s; /* How long before the image automatically zooms out */
  transition-property: -webkit-transform;
  -webkit-transform-origin: 0% 0%;  /* Set image position */
  -webkit-transform: scale(1); /* Set image size after auto zoom out */
}

html:not(.mobile) img:active { 
 cursor: zoom-out;
 -overflow: auto; /* Enable scroll if needed */
 transition: 0s;
 transition-delay: 0.05s;
 transition-property: -webkit-transform;
 -webkit-transform-origin: 0% 0%; /* Set image position */
 -webkit-transform: scale(2.5); /* Set zoom value */
}

[Axiome]

thank you for the response @jcznk
i think this gonna be so useful if it’s integrated in Anki
@dae