Is there a way to prevent the squish/skew of the image in the browser editor?

I apologize if this has been asked before. I didn’t pull up any related stuff on my searching through the discourse forum here

The hard-coded width attribute prevents the image from maintaining its aspect ratio when it gets shrunk. In particular, the skew happens when the width is set to a value greater than the width it would have in the shrunk state.

I know the attribute gets added when you use Anki’s native image resizing feature, but I’d just batch-remove that attribute and handle image sizes with the card template.

That much I understand and I do have most of the images controlled with the styling, but there are times when I prefer to use Anki’s native image resizing feature. I would suggest we should look for a way to preserve the aspect ratio when shrunk as nearly every image is likely to have a value greater than the width it would have in the shrunk state. I’m not skilled enough with html/javascript to know if this is even possible, but given that it’s a built in Anki feature, I would suggest we improve on it

Yes, it’s possible to prevent the skewing in Anki.

We could for example apply width/height: unset to the greater dimension of a constrained image. I’ll prepare a PR in the evening.

1 Like

You’re incredible. I hope you know that

I’m unable to reproduce this. See below. Could you have an addon installed that’s affecting the display?

widthissue

You’re right. It looks like the culprit is the Closet add-on

While its true that Closet injects CSS that can affect image sizes, the issue is easily reproducible with add-ons disabled.

Just take a picture with a vertical aspect ratio and set the width attribute to some high value. It will be skewed:

Closet was definitely affecting mine with the resize for what it’s worth but your explanation makes sense. Perhaps your solution will fix the closet interaction as well

I was wondering why it was working for me and not for kleinerpirat. Apparently this problem affects JPEGs but not PNGs. Maybe it’s a problem in Qt’s web engine?

image

Probably more related to their size. Did you try reproduce this with 2.1.63?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.