Image prise du téléphone Samsung orages mal quand sourit en html

Question

Donc pour une affectation d'introduction à ma classe webdev, notre professeur voulait que nous fassions une page index.html pour notre serveur qui montre un profil de nous. Ce profil devrait inclure une image.

J'ai pris une photo sur mon téléphone et l'ai téléchargée sur notre serveur, et j'étais énervée quand j'ai ouvert ma page et que mon visage a montré une rotation de 90 degrés. Alors j'ai ajouté une transformation étiquette au style:.

<img src="assets/pictures/selfie.jpg" alt="Selfie" style="width: 304px; height: 228px; transform: rotate(90)"> 

quand je l'ai montré à mon professeur, il m'a dit de ne pas utiliser la transform tag pour « éviter le navigateur du client d'avoir à faire tourner simplement tourner vous-même dans le première place".

J'ai essayé ceci dans mon éditeur de bureau, puis j'ai réimprimé la photo et retiré la transformation. Problème d'orientation identique, pivoté de 90 degrés.

<img src="assets/pictures/selfie.jpg" alt="Selfie of Ryan White" style="width: 304px; height: 228px;"> 

Que se passe-t-il ici? Et comment puis-je résoudre ce problème d'orientation?

Answer 1

Si vous faites pivoter l'image via les outils de Windows (menu contextuel, photos de Windows, etc.), cela n'est visible que pour Windows. Si vous souhaitez réellement faire pivoter l'image, vous devez utiliser Paint ou GIMP pour la faire pivoter, puis l'enregistrer de cette façon. Cela vous donnera la bonne rotation, peu importe d'où il vient.

Answer 2

Il s'agit d'une tendance courante dans la plupart des photos de téléphones mobiles. Je pourrais suggérer un logiciel pour réaliser ce que vous voulez.

1. Photoshop
2. Corel Draw
3. Peinture
4. visionneuse d'images simple

La chose la plus importante est quand vous avez atteint la transformation n'oubliez pas de sauvegarder avant d'utiliser l'image sur votre page Web.