Comment puis-je obtenir mon image à afficher orienté à la verticale?
J'ai un jpg image qui a été prise verticalement et sauvé de cette façon. Il apparaît comme il devrait (orientés verticalement) dans l'Explorateur Windows:
J'ai ce HTML/Entretoises pour l'afficher dans mon application de Météore:
<template name="nfnoscarsdonut">
<p>Here's a picture of NFN Oscar's microscopic Donut, which we had to eat because he pulled a "George 'No Show' Jones" again</p>
<img src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
</template>...mais il affiche en format "paysage" (rotation de 90 degrés vers la gauche), comme vous pouvez le voir ici:
Que dois-je faire pour obtenir l'image à redresser vers le haut et le droit d'affichage (à la verticale)?
Il semble y avoir aucune propriété orientation de la balise img
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas familier avec Meteor et c'est juste une supposition. Peut-être que le fichier JPEG a son EXIF de rotation de bien définir l'Explorateur Windows est la lecture et à l'aide de "soft-rotation de l'image pour l'afficher et le navigateur lors du référencement de l'image est tout simplement ignorant (ou vice-versa).
L'option la plus simple pourrait être de faire pivoter l'image à l'aide de CSS comme décrit ici.
Si vous ouvrez l'image dans un éditeur d'image vous pouvez voir si l'image est pivotée ou pas et si non, alors la faire tourner et voir si cela a un effet sur son affichage sur la page web.
Ou vous pouvez afficher les propriétés EXIF du fichier avec une application telle que celle mentionnée ici.
Un dernier recours pourrait être d'essayer de faire pivoter l'image selon ses EXIF de la propriété avec JS comme décrit ici, bien que toujours suppose qu'il a quelque chose à voir avec EXIF.
Quel qu'il soit, je pense qu'il a quelque chose à faire avec le fichier et/ou ses métadonnées plutôt que le HTML utilisé pour y faire référence, mais depuis je ne sais pas ce que les autres le HTML ou le CSS peut être appliqué à la balise j'ai peut-être tort à ce sujet.
Espère que ça aide!
Le lien pjrebsch a donné assez bien travaillé. Pour quelque raison que ce soit, j'ai également eu à ajouter un margin-top de la valeur. Le code est maintenant:
HTML (ajouté rotation de la classe):
CSS: