nicht angemeldet
Ausrichtung von fotos
Rolf B
Linuchs
Matthias Apsel
Gunnar BittersmannHallo, mein erster HTML-Versuch war enttäuschend. Wenn ich Fotos im Ordner ansehe, erscheinen sie im Hochformat. Die selben in HTML eingebetet ohne Formatangaben erscheinen um 90° nach links verdreht, auch wenn ich jetzt width und height angebe. Wie kann ich die Fotos richtig darstellen?
-
Hallo Gaby,
wie sehen denn die Fotos aus, wenn du sie in einem Grafikprogramm (Windows Fotoanzeige, Paint, Gimp, …) öffnest? Kameras speichern normalerweise die Orientierung der Aufnahme mit und nicht jede Software berücksichtigt diese Information bei der Anzeige.
Viele Grüße
Robert-
Hi, ich kenne nur irfanview. Wenn ich es damit öffne, wird es korrekt dargestellt.
-
Hallo Gaby,
den hast Du also, super. Dann kontrolliere doch damit mal die EXIF-Daten der Bilder, die der Browser "falsch" darstellt. Gibt es eine "Orientation" Eigenschaft?
Rolf
--
sumpsi - posui - clusi
-
-
-
Hallo Gaby,
ich nehme an, dass die Fotos mit senkrecht gehaltener Kamera gemacht wurden und dadurch eine "falsche" Ausrichtung haben, d.h. in der Fotodatei ist das Bild verdreht und ggf. enthalten die EXIF-Daten die Info, wie die Verdrehung aussieht. Bei der Anzeige im Ordner kann das Betriebssystem das nutzen und eine Gegenrotation herbeiführen.
Möglichkeit 1:
Die technisch einfachste, aber je nach Fotomenge aufwändigste Lösung ist, ein Tool wie Irfan View zu nutzen, um die Bilder zu drehen, so dass keine Anpassung der Orientierung mehr nötig ist. Ich kann Dir aus dem Handgelenk nicht sagen, ob Irfan View eine Funktion hat, um einen Ordner voller Bilder passend zu ihren EXIF-Daten zu rotieren. Könnte ggf. in IrfanView Thumbnails enthalten sein.
Möglichkeit 2:
Es gibt im Firefox die experimentelle CSS Eigenschaft image-orientation: from-image. Aber bisher nur dort, das ist CSS Images Level 4, ein Arbeitsentwurf.
Du brauchst im <head> Bereich deines HTML Dokuments ein <style> Element. Darin muss eine CSS Regel notiert werden - wie gesagt, das geht nur im Firefox:
<style> img { image-orientation: from-image; } </style>Wenn Du bereits eine CSS Datei hast oder einen <style> Abschnitt mit eigenen Regeln, mische es passend dazu.
Diese Regel ist jetzt sehr allgemein und wird auf jedes img Element angewendet. Wenn sie nur auf die Bilder im Galeriebereich wirken soll, musst Du den CSS Selektor entsprechend anpassen. Wenn Du noch nicht weißt, wie das geht, muss ich mehr über dein HTML wissen um es Dir zeigen zu können.
Möglichkeit 3:
In anderen Browsern musst Du entweder am Server die Image-Orientierung abfragen und entsprechende Rotationsanweisungen an's Bild hängen, oder eine JavaScript-Bibliothek verwenden, die die EXIF-Daten ausliest und entsprechend interpretiert. Für "mein erstes HTML" dürfte das aber der Overkill sein.
Rolf
--
sumpsi - posui - clusi-
Habe in Irfanview die Fotos nach links gedreht, abgespeichert, dann wieder nach rechts gedreht und abgespeichert. Jetzt funktioniert es. Danke an alle.
-
Hallo Gaby,
dabei
Habe in Irfanview die Fotos nach links gedreht, abgespeichert, dann wieder nach rechts gedreht und abgespeichert.
gibt es allerdings u.U. eine kleine „Falle“: Je nach Bildbearbeitungsprogramm kann es sein, dass das JPEG entkomprimiert, gedreht und dann neu komprimiert gespeichert wird. Bei Fotos, die mit einer Qualität > 90 % vorliegen, ist das Problem nicht so groß, bei stärker komprimierten Bildern kann das allerdings schon auffallen. Am Sichersten sind Programme, die beim Drehen lediglich die Bildorientierung ändern und nicht die Bilddaten an sich. Für Linux können das die Kommandozeilenprogramme
jpegtranundexiftran, für andere Betriebssysteme gibt es bestimmt Entsprechendes.Viele Grüße
Robert-
Hallo Robert,
IrfanView hat dafür die Funktion "JPG lossless rotation". Man muss sie natürlich verwenden 😀
Rolf
--
sumpsi - posui - clusi
-
-
Du hast dein Problem bereits gelöst.
Es geht aber auch ohne Grafik-Programm. Da du vermutlich die Bilder in der HTML-Datei einzeln benennst, kannst du ihnen auch einzeln eine Klasse mitgeben zum Drehen:
.rotate_links { transform: rotate(-90deg); // 90° gegen Uhrzeigersinn } .rotate_rechts { transform: rotate(90deg); // 90° im Uhrzeigersinn }<img src="papa.jpg" /> // Bild nicht gedreht <img src="mama.jpg" class="rotate_links" /> <img src="hund.jpg" class="rotate_rechts" />Die Bilder (und andere HTML-Elemente) verschaffen sich Platz im ursprünglichen Format und drehen dann um den Mittelpunkt. Man kann aber auch den Platz vorgeben, z.B. durch einen umgebenden Container, die Bilder darin verschieben und um einen Eckpunkt drehen.
Hört sich kompliziert an, ist aber Routine und benötigt (für neue Bilder) keine vorherige Grafik-Bearbeitung.
Für Tabellen-Köpfe gut zu gebrauchen, die Schrift senkrecht zu stellen, um horizontal Platz zu sparen.
Linuchs
-
Hallo Linuchs,
Es geht aber auch ohne Grafik-Programm. Da du vermutlich die Bilder in der HTML-Datei einzeln benennst, kannst du ihnen auch einzeln eine Klasse mitgeben zum Drehen:
Das wäre aber ein Bekämpfen der Symptome statt ein Beseitigen der Ursache. Bei neuen Bildern muss man zudem auch erst wieder schauen, ob sie richtig orientiert sind. Es ist nicht ersichtlich, warum die Bilder eine Klasse rotate-links (besser drehe-links oder rotate-left) erhalten, denn die Bilder erscheinen ja nicht gedreht, sondern richtig herum.
Daher ist die Korrektur mit einem Grafikprogram mMn der einzig sinnvolle Weg.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯-
Hallo Matthias,
Das (drehen) wäre aber ein Bekämpfen der Symptome statt ein Beseitigen der Ursache.
Oft gibt es mehrere Wege zum Ziel und jeder meint "seinen" gefunden zu haben.
Ich schaue mir Bilder fürs Web grundsätzlich mit Gimp an, dieses Programm zeigt die Abmewssung, kennt aber die ursprüngliche Lage offenbar nicht. Da ich die Abmessungen ohnehin verkleinern muss, drehe ich die Bilder auch gleich.
Und mit Bild - Modus - indiziert - 255 Farben dampfe ich die sonst gleiche Datei noch auf ein Drittel Größe ein.
Das alles funktioniert nicht, wenn man ein Fremdbild aus dem Web anzeigen möchte. Die Möglichkeit, mit CSS zu drehen, macht gelegentlich Sinn.
Linuchs
-
-
@@Linuchs
Es geht aber auch ohne Grafik-Programm. Da du vermutlich die Bilder in der HTML-Datei einzeln benennst, kannst du ihnen auch einzeln eine Klasse mitgeben zum Drehen:
Wie RR schon anmerkte, hängt die Darstellung der Bilder vom System ab. Auf manchen Systemen werden die EXIF-Daten beachtet, auf anderen nicht; d.h. auf manchen System sind die Bilder schon richtig orientiert. Die dann mit CSS zu drehen, ist wohl keine gute Idee.
Und es geht auch aus einem anderen Grund nicht (außer bei quadratischen Bildern): Zuerst wird der vom ungedrehten Bild benötigte Platz ermittelt und freigehalten, dann wird das Bild gedreht, ohne dass der benötigte Platz neu berechnet werden würde. Guckst du.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Und es geht auch aus einem anderen Grund nicht (außer bei quadratischen Bildern): Zuerst wird der vom ungedrehten Bild benötigte Platz ermittelt und freigehalten, dann wird das Bild gedreht, ohne dass der benötigte Platz neu berechnet werden würde.
Meinete ich doch am 27.6. 13:32
„Die Bilder (und andere HTML-Elemente) verschaffen sich Platz im ursprünglichen Format und drehen dann um den Mittelpunkt.“
Da kann man einen Container mit fester Größe vorgeben, z.B. im Tabellen-Kopf wenig breit, aber sehr hoch. Dann den Text unten im Container anordnen und -90° um seine obere linke Ecke 0 0 drehen. So ist er von unten nach oben lesbar:
<section id="hochkant"> <style> #hochkant { position: relative; width: 1.5em; height: 15em; border: 1px dotted #000; } #hochkant div { position: absolute; left:0; bottom: -1em; display: inline-block; white-space: nowrap; /* vermeidet Zeilenumbrueche in der ungedrehten Position */ transform: rotate(-90deg); /* das allein dreht um die Mitte dieses div */ transform-origin: 0 0; /* Zusatz: Drehpunkt X Y festlegen */ } </style> <div>unten angeordnet und gedreht</div> </section>Die css-Transformer kann man bei Bedarf (für alte Browser?) noch aufmozen:
-webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;-
@@Linuchs
Die css-Transformer kann man bei Bedarf (für alte Browser?) noch aufmozen:
-webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;Nein, dafür besteht kein Bedarf (außer Blackberry-Exot).
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
-
-
-
Hi,
bitte beantworte die folgenden Fragen:
- welches Betriebssyszem?
- welches Betrachterprogramm?
- welche HTML-Version?
- welcher Browser, Version?
- womit wurden die Fotos erstellt?
- wurden die Fotos zwischenzeitlich bearbeitet, womit?
- hast Du dir schon die Exif-Daten angeschaut?
Wenn die Bilddatei Exif-Daten enthält, werden diese je nach Betriebssystem, Betrachterprogramm. Browser und HTML-Version bei der Anzeige berücksichtigt.
Auf dem Server könntest Du sie z. B. mittelt GD-Lib und PHP auslesen und manipulieren. Dann könntest Du vorherbestimmen, wie sie mit HTML-5 im Browser angezeigt werden sollen. Die CSS-Version des Browsers hat auch noch Einfluss.
LG
RoRo
