Pourquoi mon image apparaît-elle à l'envers en HTML même si elle est correctement orientée en ligne ?

Dépannage des incohérences d'orientation des images dans HTML

Problème :

Une image récupérée à partir d'un lien spécifié apparaît à l'envers lorsqu'elle est affichée en utilisant le bouton tag.

Analyse :

En examinant le lien de l'image, il est évident que l'image a une orientation normale. Cependant, lors de la définition du lien comme attribut source du fichier balise, l'image est rendue à l'envers comme observé dans l'extrait de code JSFiddle fourni. Cela soulève la question de savoir quelle est la cause de cet écart d'orientation.

Solution :

Grâce à des recherches approfondies, une solution partielle a été découverte. Les images contemporaines intègrent souvent des métadonnées qui définissent l'orientation prévue de la photographie. Pour résoudre ce problème, une nouvelle spécification CSS a été introduite spécifiquement pour l'orientation des images. En incorporant la règle CSS suivante dans votre feuille de style, le problème d'orientation de l'image peut être atténué :

<code class="css">img {
    image-orientation: from-image;
}</code>

Support du navigateur :

Depuis le 25 janvier 2016, le support car cette règle CSS est limitée à Firefox et iOS Safari (bien que derrière un préfixe). Cependant, certains utilisateurs ont signalé des problèmes persistants avec Safari et Chrome. Il convient de noter que Safari mobile semble prendre en charge de manière innée l'orientation des images sans nécessiter la balise CSS explicite.

Perspectives futures :

Il incombe aux développeurs de navigateurs de mettre en œuvre la prise en charge pour la propriété image-orientation afin de garantir une orientation cohérente de l’image dans différents navigateurs. D'ici là, les utilisateurs peuvent rencontrer des disparités dans l'orientation des images dans certains navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!