Image Width/Height Limit

When placing an image, the image is often much bigger than the actual answer. An option to limit pasted images’ sizes in terms of width/height at insertion would be very helpful to prevent this.

3 Likes

After you place that huge image, you can already resize it to a display size that works for you. I think that’s what you’re asking for, isn’t it? You can also obviously edit the HTML to add those limits yourself, but it sounds like you want something easier than that.

After you paste/insert the image – “double-click to expand” it to full-size (or at least as big as there is room for).
image

Anki will show you its full pixel size –

And then you can drag the corner-handles to resize it to the max size you want to see it. It preserves that in the img tag – here with a max width: <img src="b862a4ea98f4bffb1aed070e2a3ba1d8fb548971.jpeg" data-editor-shrink="false" width="275"> – so that limits how big the image can be on your cards.

image

3 Likes

I’m aware, I was suggesting making an automatic option to save time.

You could try inserting your own solution.
Method A)

You could put a styling into your note template, which would make always sure to set a max width and height.
Be aware: You would only see the result when looking at the card, not while editing it.

img{
   max-width: 300px;
   max-height: 300px;
}

Method B)
Would work in a very similar way. Though you would have to insert it into every single card, where you try to have this “automatically” adjusted when adding pictures.

Just add the following into the HTML-Editor of the certain field, you want to have the picture in:

<style>
img{
   max-width: 300px;
   max-height: 300px;
}
</style>
2 Likes

I don’t understand what you’re asking for then. Automatic in what sense? That Anki decides the size for you? Based on what? Wouldn’t it be different for every image?

Not an exact size, just a limit on width or a limit on height. For example, say the limit on height was 100 pixels. Then an image that is 300 pixels tall and some pixels wide would be resized to 100 pixels tall and however many pixels wide it would look like had it been manually resized like you showed above.

If you want the same limit on every image, you can do that in your note type, like Duude explained.

I think AnkiMobile already has this feature (to limit the height when pasting), but Anki for desktop is not available.

You may be able to resize the image when pasting by using the add-on “ImageResizer” or “AJT Media Converter”.

And if you want to resize images in the editor and not in the reviewer, you can use the CSS Injector to do so. (See the comments in the rating)

1 Like

It seems to compress the card when limited. Is there a way to make it so that it’s not compressed and instead stays the same shape?

With max_height = 200:

Edit page:

Preview page:

Restore the original size in the field.

Yeah if it’s original size it seems to work but if not, then it gets compressed. Odd.

try adding

    object-fit: contain;
4 Likes