Wie bekomme ich mein Bild auf display vertikal ausgerichtet ist?

Ich habe ein jpg-Bild, das die vertikal aufgenommen und auf diesem Weg gerettet. Es scheint, wie es sollte (vertikal orientierten) im Windows-Explorer:

Habe ich dieses HTML/Spacebars, um ihn in mein Meteor-app:

<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>

...aber es zeigt in der "Landschaft" (gedreht um 90 Grad nach Links), wie Sie sehen können hier:

Was muss ich tun, um das Bild zu begradigen und display, rechts (vertikal)?

Scheint es kein orientation-Eigenschaft für das img-tag

InformationsquelleAutor B. Clay Shannon | 2015-10-10

2

Ich bin nicht vertraut mit Meteor und das ist nur eine Vermutung. Vielleicht ist die JPEG-Datei hat seine EXIF-rotation-Eigenschaft festlegen, welche Windows-Explorer Lesen und mit "soft-drehen" das Bild für die Anzeige und die der browser beim Verweis auf die Bild einfach ignorieren (oder Umgekehrt).

Die einfachste option sein könnte, um zu drehen Sie das Bild mithilfe von CSS wie beschrieben hier.

Wenn Sie öffnen Sie das Bild in ein Bild-editor, können Sie sehen, wenn das Bild gedreht ist oder nicht und wenn nicht, dann drehen Sie es und sehen, ob das hat keine Auswirkungen auf seine Anzeige auf der web-Seite.

Oder man könnte die Ansicht der EXIF-Eigenschaften der Datei mit einer Anwendung wie einer erwähnt hier.

Letztes Mittel sein könnte, um zu versuchen, um das Bild zu drehen gemäß Ihrer EXIF-Eigenschaft mit JS wie beschrieben hier, obwohl das immer noch meint, es hat etwas zu tun mit EXIF.

Was auch immer es ist, ich denke, es hat etwas zu tun mit der Datei-und/oder der zugehörigen Metadaten, anstatt die HTML-verweisen verwendet, aber da ich nicht weiß, was andere HTML-oder CSS kann angewendet werden, um die Tags, die ich möglicherweise falsch.

Hoffe, das hilft!
- Ich öffnete es in IrfanView, und es sieht gut aus.
InformationsquelleAutor pjrebsch

Den link pjrebsch gab ziemlich viel gearbeitet. Aus welchem Grund auch immer, hatte ich auch hinzufügen, ein margin-top Wert. Der code ist jetzt:

HTML (Hinzugefügt drehen Klasse):

<img class="rotate" src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>

CSS:

.rotate {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  margin-top: 88px;
}

InformationsquelleAutor B. Clay Shannon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.