[5.x]: Asset thumbnails distorted and blurry images in element cards

[thupsi]

What happened?

Description

Asset thumbnails are not always keeping their aspect ratio and thus are sometimes distorted. Tested on Windows Chrome.

A simple solution would be to add object-fit: contain; to the img tag.

Craft CMS version

5.0.5

PHP version

No response

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[thupsi]

Also just saw that on element cards the image is set to object-fit: cover;, which results in a blurry image if the original aspect ratio does not fit the given area.

A possible solution here would be to use a transform that is set to the exact aspect-ratio of the card image area.

[brandonkelly]

@brianjhanson The aspect ratio bug was caused by #14834.

The card view screenshot is expected. We want the image to fill the space. If the image is smaller than that space, it’s going to be a little blurry, regardless of whether the browser or a transform is upscaling it.

[thupsi]

It is expected if you don't control the area of the image in the card or the size (width and height) of the image source. Since you control both, you can make them match and therefore avoid unnecessary scaling. Of course if the original image is smaller, then scaling is unavoidable. But that's not the case here.

[thupsi]

@brandonkelly To make the above comment more clear, I think in element cards the transform ratio should be 1:1 (set to crop), since that is the ratio of the rendered image area.

This way:

• No wasted kb, what you download is what you render.
• No unnecessary scaling or blurriness, the transformed image fits the designated area in both axes, no matter its original ratio.

[brandonkelly]

Yeah sorry, was being a little thick yesterday. I assumed the source image was smaller to begin with.

We’ve fixed the aspect ratio bug for the next release (#14876), and the upscaling bug for Craft 5.1 as well (b122c62).

[brandonkelly]

5.0.6 is out with that aspect ratio fix.

[brandonkelly]

5.1 is out with the card view fix.