Différences d'orientation de l'image dans les balises d'image

Lors de l'incorporation d'images dans une page Web à l'aide de balises d'image, il est prévu que l'orientation de l'image reste cohérente avec son état d'origine. Cependant, dans certains scénarios, les images peuvent apparaître à l'envers ou de travers après avoir été affichées dans une balise d'image. Pour résoudre ce problème, nous allons explorer les causes potentielles et proposer une solution.

L'exemple fourni montre une image qui s'affiche correctement dans un navigateur Web, mais qui s'inverse lorsqu'elle est attribuée à l'attribut src d'une balise d'image. Cette disparité est due aux métadonnées intégrées aux images qui précisent leur orientation. Pour lutter contre cela, CSS introduit la propriété image-orientation.

Solution CSS : image-orientation

En ajoutant la déclaration CSS suivante, l'orientation correcte de l'image peut être restauré :

img {
    image-orientation: from-image;
}

Cette propriété demande aux navigateurs de prioriser les métadonnées contenues dans le fichier image lui-même, garantissant que l'image est affichée dans l'orientation prévue. Il est important de noter que la prise en charge de cette propriété par les navigateurs varie, Firefox et iOS Safari l'implémentant avec des résultats fiables. D'autres navigateurs, tels que Safari et Chrome, peuvent encore présenter des problèmes lors de l'utilisation de cette propriété.

À mesure que les navigateurs continuent d'évoluer, il est prévu que la prise en charge de l'orientation des images s'étende, offrant ainsi une expérience d'affichage d'image transparente et cohérente dans tous les navigateurs. différentes plateformes.