Fotos in Website (html) hochkant darstellen.

DaTorre

Aktives Mitglied
Hallo
Ich habe seit einigen Wochen folgendes Problem: Wenn ich hochformatige Fotos in eine Webseite einbaue, werden sie konsequent im Querformat dargestellt. Wenn ich die gleichen Fotos in Paint oder Affinity Photos lade, werden sie korrekt im Hochformat dargestellt, ohne dass ich sie drehen muss. Woran liegt es, dass mein HTML-Code bzw. der Browser die Formate nicht erkennt und hoch oder quer korrekt darstellt? Woran erkennt der Browser, ob ein Bild im Hoch- oder Querformat dargestellt werden muss? Meine Fotos liegen im jpg-Format vor.
Mein <img>-Tag lautet so:
<img scr="Pfad zum Foto/Filename.jpg" alt="Foto im Hochformat" width="200" >
Damit die Fotos ihre originalen Seitenverhältnisse behalten, gebe ich entweder nur die Breite (width) oder nur die Höhe (height) an. Was mache ich falsch? Was muss ich noch berücksichtigen?
Danke für Tipps.
Gruss Datorre
 

Dragonlord

PCtipp-Moderation
Teammitglied
Fotos

Hallo Datorre

Dies hat damit zu tun, dass Dein PC die Biler erkennt und automatisch merkt, dass Du ein Hochformatfoto gemacht hast und dann Dir das Bild hochkannt anzeigt.

Für die Bilder im Netz bleibt Dir nichts anderes übrig, als diese kurz zu öffnen und zu drehen. Dann zu speichern und die Sache ist erledigt.

Gruess Roger
 

DaTorre

Aktives Mitglied
Hallo Roger
Danke für die Antwort. Du schreibst:

Für die Bilder im Netz bleibt Dir nichts anderes übrig, als diese kurz zu öffnen und zu drehen. Dann zu speichern und die Sache ist erledigt.

Womit soll ich die Bilder öffnen? Wenn ich die jpg-Dateien öffne (mit einem Bildbetrachtungsprogramm), dann stehen oder liegen sie im richtigen Format. Ich brauche also nichts zu drehen.
Wenn ich die jpg-Dateien in die Webseite einbaue, liegen alle. Das heisst doch, dass der Browser nicht weiss, welche Fotos hochformatig und welche querformatig sind.
Ich habe auch ein liegendes Fotos (das aber eigentlich ein Hochformat ist) von der Webseite mit "speichern unter" zurück auf meine Festplatte gespeichert und dann (wieder) mit einem Bildbetrachtungsprogramm, das übrigens das Foto automatisch korrekt hochkant darstellt, in die liegende Position gedreht und dieses Bild wieder in die Webseite eingebaut - auch wieder mit dem Ergebnis, dass das Foto im Querformat dargestellt wird (obwohl es ein Hochformat ist). Wie bringt man einem Browser bei, dass es sich bei einem Bild (<img>) nicht um Querformat, sondern um Hochformat handelt?

Es ist also nicht so einfach, wie du annimmst.

Danke für weitere Hinweise.
Gruss
 

DaTorre

Aktives Mitglied
Hallo Roger
Ich habe vorhin ein wenig vorschnell geantwortet.
Du hattest Recht. Weil es aber noch einfacher ist, als du geschrieben hast, habe ich es zuerst nicht gemerkt.
Denn die Fotos werden in meinem Bildbetrachter/-bearbeiter wie bereits gesagt im korrekten Format dargestellt. Ich muss sie also nicht drehen. Darum kam ich gar nicht auf die Idee, die sie zu speichern. Das war es aber, was mir geholfen hat. Die hochformatigen Fotos sind zu speichern, obwohl sie im Bildbearbeitungsprogramm (und auf dem Fotoapparat) richtig dargestellt sind. Die so gespeicherten hochformatigen Bilder werden jetzt auch im HTML-Code hochkant dargestellt.
Nochmals besten Dank an Roger.
Gruss
 

Dragonlord

PCtipp-Moderation
Teammitglied
Bitte

Ist doch gern geschehen.

Ich habe mir schon so angewöhnt, dass ich alle Bilder im Querformat mache und nur in seltenen Fällen auf Hochformat ausweiche.

Gruess Roger
 

Pascal - Schefer IT

Aktives Mitglied
Metadaten

Hallo Zusammen

Dieses Problem hatte ich in bei der Erstellung einer Gallerie ebenfalls. Hauptsächlich geht dies von den neuen Kameras und Smartphones aus welche die Ausrichtung der Bilder in der Datei als Meta-Information verzeichnen. Sobald die Bilder in einem Grafikprogramm neu gespeichert werden, sind diese Informationen dann obsolet. Diese Daten lassen sich jedoch auslesen. Allerdings ist dies nicht mittels HTML möglich sondern bedarf entweder JavaScript oder PHP. Falls Ihr Interesse habt kann ich Euch mein PHP Script posten, allerdings setzt es etwas Kenntnisse voraus.

Lasst mich wissen wenn ich Euch helfen kann.

Gruss
Pascal
 
Oben