Object Fit of Avatars on Details view causes portrait images to stretch

[SlyDave]

• Laravel Version: 8.83.26
• Nova Version: 4.18.2
• PHP Version: 7.4
• Database Driver & Version: MariaDB 10.4.12
• Operating System and Version: Win 11 Pro 21H2 22000.1098
• Browser type and version: Edge Version 107.0.1418.35 (Official build) (64-bit)
• Reproduction Repository: N/A

Description:

Avatar's object-fit is incorrect and warps images when viewed on Details of a resource.
There is no way to change the class or add style to the FileField.vue/ImageLoader.vue component to correct this.

Detailed steps to reproduce the issue on a fresh Nova installation:

Looking at the top of the 2 avatars in the screenshot you can see the object fit is the default, undefined value of fill, resulting in a stretched image.

Here I've used inspection tools to change the object-fit to cover

I believe the default for avatars should be cover, or at the very least this should be optional, as is the aspect ratio.

The field in use above is defined as:

            Avatar::make('Avatar', 'avatar')
                ->rounded()
                ->aspect(Image::ASPECT_SQUARE),

[SlyDave]

This is a natural extension and consequence of #4930 and all its discussion points also hold true here.

I believe that for searchable content, the object-fit of displayed avatars should also be cover, double so if aspect is Square

[SlyDave]

I assume issues being moved out of the issue tracker into discussions is one way to allow an issue to be ignored and die... /sigh