Gestion des images de hauteur différentes dans un bloc fixe

Bonjour, j'ai une question sur du CSS, je butte sur une situation spécifique. J'ai un site WP qui liste des produits, une de mes images affiche le produit détouré (en png). Il se peut que les images qui sont utilisés soient de format différents (carré, grande hauteur et petite largeur ou inversement). J'applique une largeur "100%" et une hauteur "auto" sur mon image. Ce qui est très bien temps que l'image de base a un ratio à peu près convenable, mais dès que je tombe sur des image par exemple très haute et peu large, elles dépassent de mon bloc. Et quand je règle le problème pour ces images, ce sont les images plus large que haute qui sont déformés.

J'aimerais avoir un rendu homogène sur toutes mes images détourés. Bien sûr, j'ai déjà pris en compte de les centrer en largeur et hauteur. À part réduire encore l'affichage de l'image dans le bloc parent pour limiter les effets indésirables, je ne voit pas d'autre solution.

merci par avance pour vos réponses

Bonsoir.

Il y a object-fit et object-position qui peut régler votre problème pour la plupart des navigateurs, malheureusement pas pour tous…

merci beaucoup Olivier C.

Je n'ai pas compris votre remarque sur le référencement. L'image en background ne serais pas pris en compte par Google ? Le truc c'est que le site que je suis entrain de faire est une refonte d'un site existant et je dois faire la passation du référencement de l'ancien vers le nouveau. Les images doivent apparaître dans le html le plus possible.