VaAvatar deforms non-square images

[bagrovYKT]

Vuestic-ui version: 1.9.8

Description

VaAvatar is currently generate an img tag, which is sensitive to aspect ratio of the source image. So, when it's not 1:1, it is impossible to use VaAvatar component because it deforms image.
However, there is a best-practice for this case to use background-image style property with background-size: cover, background-position: center center instead of img tag. So, i think VaAvatar component should be refactored for properly displayed non-square images.

Best regards to all the contribute team!

[untael]

Let's compare both approaches:

Using img Tag

Advantages:

1. Accessibility: The img tag provides better accessibility features out-of-the-box, including the alt attribute for alternative text, which screen readers use to describe the image to visually impaired users.
2. SEO: Search engines can index images with proper alt text, improving SEO.
3. Responsive Design: img tags are easier to work with when it comes to responsive design. They can be styled with CSS for different screen sizes.
4. Loading: Browsers optimize the loading of img tags, including lazy loading in modern browsers.

Disadvantages:

1. Styling: Some complex styling (e.g., overlay text or complex positioning) might be trickier with img tags compared to using background images.

Using background-image on a Block Element

Advantages:

1. Complex Layouts: Easier to overlay text or other elements on top of the image since it’s just a background.
   Consistent Sizing: Can be easier to maintain consistent sizing and positioning of the background image across different elements.
2. Fallbacks: You can define multiple fallback images for different screen sizes using media queries.

Disadvantages:

1. Accessibility: Requires more effort to make it accessible (e.g., adding aria-label or visually hidden text).
2. SEO: Background images are not indexed by search engines, so you miss out on SEO benefits.

For me in most cases using the img tag is preferable due to its accessibility, SEO benefits, and responsive handling.