# Display image in original size
**URL:** https://forums.ankiweb.net/t/display-image-in-original-size/25387
**Category:** Card Design
**Created:** [December 14, 2022, 7:29pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387 "2022-12-14T19:29:37Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@noty](https://forums.ankiweb.net/u/noty)
#### Post date: [December 14, 2022, 7:29pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/1 "2022-12-14T19:29:37Z")
Greetings!
How can the photos be hunted in their original form?
Also how can their size be controlled by code?
---
### Author:  [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)
#### Post date: [December 14, 2022, 7:41pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/2 "2022-12-14T19:41:08Z")
Images are loaded into the document with the `![]()
` HTML tag. Like any other tag, it can be styled using CSS rules. By default, images will display ~~in full size~~ (**incorrect, see comments below)** during review. If you want their height to never exceed the height of the window, you could use the unit `vh` like this:
```auto
img {
max-height: 100vh;
}
```
If your images are small during review, you might have a rule like that somewhere in your template. Or was your question about the size of images in the editor? In that case, this setting (2.1.55+) might be what you’re looking for:
---
### Author:  [@noty](https://forums.ankiweb.net/u/noty)
#### Post date: [December 14, 2022, 7:54pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/3 "2022-12-14T19:54:17Z")
I wouldn’t tell you that you are wrong, so that I don’t come out of this story as a layman… 😁
But today the situation is that the image is displayed up to the size of the page.
I want to give her her original size.
I don’t have a special card setup.
---
### Author:  [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)
#### Post date: [December 14, 2022, 7:58pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/4 "2022-12-14T19:58:08Z")
Oh, you’re right! My bad. Image height is constrained to `95vh` (= 95% of the viewport height).
>
To answer your question, use the following CSS in your note template:
```auto
img {
max-width: unset;
max-height: unset;
}
```
---
### Author:  [@noty](https://forums.ankiweb.net/u/noty)
#### Post date: [December 14, 2022, 8:26pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/5 "2022-12-14T20:26:50Z")
By the way: in the current method, there is no control over the size of the image by zooming.
The solution you brought solves that too.
Thanks!!
---
### Author:  [@noty](https://forums.ankiweb.net/u/noty)
#### Post date: [December 14, 2022, 10:16pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/6 "2022-12-14T22:16:13Z")
Is there a way for the default image to be 95% of the width of the browser,However, I want to be able to zoom in and out of the image (for example: 180%)?
---
### Author:  [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)
#### Post date: [December 14, 2022, 10:52pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/7 "2022-12-14T22:52:17Z")
The images do scale on zoom, but only until they reach the maximum height defined by the rule in `reviewer.scss`.
Off the top of my head I don’t know how we would go about solving this or if whether we should even spend effort on that.
Anki’s Chromium browser (to be exact, its Blink Renderer) offers a _pinch-to-zoom_ action that scales the **visual viewport** , meaning it just scales the part of the **layout viewport** that you can see - therefore not affecting the layout.
[Going Deeper into Zoom on a Website | by Kelvin Tham | Medium](https://medium.com/@linkors/going-deeper-in-zoom-on-a-website-97544d04eb1d#:~:text=The%20visual%20viewport%20is%20the%20area%20of%20the%20site%20that%20the%20user%20is%20currently%20seeing).
If you’re running Anki on a laptop, you could try to zoom with your trackpad. You can trigger the same sort of zoom on a touch device.
> 🛈 For the interested: Here’s a demo that illustrates the visual viewport: [http://bokand.github.io/viewport/index.html](http://bokand.github.io/viewport/index.html)
---
### Author:  [@noty](https://forums.ankiweb.net/u/noty)
#### Post date: [December 14, 2022, 11:01pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/8 "2022-12-14T23:01:11Z")
As you can see, I don’t understand HTML that much, but as far as I understand, if there is no definition of a maximum width, you can define a width and then increase and decrease as you wish. (by zoom-of course)
But since Anki has the definition of max width, this cannot be done. am I wrong?
---
### Author:  [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)
#### Post date: [December 14, 2022, 11:12pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/9 "2022-12-14T23:12:31Z")
What you’re saying is not wrong, but you asked if there’s a way to have the default width at 95%. Imagine you got a small image of 200 x 300 pixels, but your window is maximized at 1920x1080px. If we globally forced such images to 95% viewport width via CSS like:
```auto
img {
width: 95vw;
height: 95vh;
}
```
…, not only would the image look pixelated, it would also be forced from its original 2:3 into a 1:1 aspect ratio. Because user images can be of any aspect ratio and size, we must not define a default size for them.
(If you want to test this yourself, add those two lines underneath the ones from the solution above.)
---
### Author:  [@noty](https://forums.ankiweb.net/u/noty)
#### Post date: [December 15, 2022, 12:32pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/10 "2022-12-15T12:32:23Z")
Only one point is not clear to me yet.
I have a full hd screen.
I have a picture of size 5000\*3000.
I defined the following definition in “design”:
```auto
{
img
max-width: unset;
max-height: unset;
}
{
img
max-height: 230px;
}
```
If I use zoom to enlarge the image during the review, will I be able to see the part of the image that is shown in front of me in the original quality?
---
### Author:  [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)
#### Post date: [December 15, 2022, 12:37pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/11 "2022-12-15T12:37:25Z")
Yes.
And you can simplify your CSS like this:
```auto
img {
max-width: unset;
max-height: 230px;
}
```
CSS is evaluated from top to bottom. When you set the same property multiple times on an element, only the last definition will take effect - that’s where the “cascading” from **C** ascading **S** tyle **S** heets comes from.
---
### Author:  [@system](https://forums.ankiweb.net/u/system)
#### Post date: [January 14, 2023, 12:38pm UTC](https://forums.ankiweb.net/t/display-image-in-original-size/25387/12 "2023-01-14T12:38:14Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.