Greetings!
How can the photos be hunted in their original form?
Also how can their size be controlled by code?
Images are loaded into the document with the <img> 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:
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:
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.
1 Like
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:
img {
max-width: unset;
max-height: unset;
}
1 Like
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!!
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%)?
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.
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
1 Like
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?
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:
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.)
2 Likes
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â:
{
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?
Yes.
And you can simplify your CSS like this:
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 Cascading Style Sheets comes from.
2 Likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.