• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder in HTML

G

Gaffi66

Neues Mitglied
Hallo zusammen bin neu hier,

habe heute mit der Handycamera Bilder gemacht und mit einfachem Code in die Seite eingefügt.

<p><img border="0" src="welpen1.jpg" width="100%" height="100%"></p>

Die Bilder sind aber verdreht um 90 oder 180 Grad obwohl Sie auf dem Rechner (Windows 8 Vorschau) und auf dem Handy (Samsung S4 mini) richtig dargestellt werden.

Da wird wohl irgendeine Information in der Datei mitgegeben um eine Automatische Rotation herbeizuführen, die HTML nicht berücksichtigt. Bitte um Hilfe wie ich die Rotation in HTML übernehmen kann.

Vielen Dank im voraus an alle
 
Normalerweise dreht man das Foto manuell. Einfach ein x-beliebiges Grafikprogramm öffnen, egal ob Paint oder Office Picture Manager oder was auch immer, ja, es geht sogar im Windows eigenem Bildbetrachter.

Ansonsten, versuche es hiermit:
Code: 
div {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
je nach ausrichtung auch 270°
 
sorry wenn ich so blööd frage, habe bisher aber nur html code geschrieben bin anfänger nur mit geringen kentnissen, aber wie müsste dann der code mit dem jpg aussehen?
oder einfach meine hatml zeile anfügen oder voranstellen, oder muss das dann alles css like sein?
 
Eine Digitalkamera/Handykamera speichert zu jedem Bild Informationen, u.a. gehört auch die Ausrichtung dazu. Wenn mit dem Apparat ein "gedrehtes" Bild gespeichert wird, steht das somit auch in der Datei. Moderne Bildanzeigeprogramme wie die von dir genannte Windows Vorschau oder auch vom Handy erkennen diese Informationen in dem Bild und drehen es zur Ausgabe am Bildschirm richtig. Dadurch ist das Bild in der Datei aber noch lange nicht in der richtigen Position gespeichert.

Browser, die ein per HTML eingebettetes Bild anzeigen, erkennen diese Eigenschaften nicht. Für diese Ausgabe musst Du wie schon geschrieben das Bild nachträglich bearbeiten und dann erst in die Webseite einbauen. Per CSS kann man das Bild zwar auch drehen, ist aber eher unüblich. Wenn Du es per CSS statt per Bildbearbeitung machen willst, musst Du o.g. CSS-Code so einbinden wie es für CSS üblich ist. Beispiele und Anleitungen findest Du z.B. hier:
http://www.css-lernen.net/css-grundlagen.php
http://www.bjoernsworld.de/css/grundlagen.html
http://www.css4you.de/
http://www.webmasterpro.de/coding/article/css-einfuehrung.html
 
Wie eigentlich schon gesagt: Man kann das Bild in einem Bearbeitungsprogramm drehen. Oder man macht es mit CSS:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Irgendwas</title>
  <style>
   #a {
     -ms-transform: rotate(90deg);
     -webkit-transform:rotate(90deg);
     transform: rotate(90deg);
   }
  </style>
</head>
<body>
  <img src="x.png" id="a" />
</body>
</html>
ODER:
Code: 
<img src="x.png" style="-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);" />
 
Eine ID ist da wohl nicht so eine gute Idee, weil es ja wahrscheinlich mehrere Bilder sind, die gedreht werden müssen. Besser eine Klasse. Wenn ich das Problem hätte, würde ich aber unbedingt das Drehen mit einem Bildprogramm vorziehen. Mit der Batchbearbeitung von Irfanview und den Exif-Informationen (wenn die Kamera sie unterstützt) ist das ein Klacks. Dann haben sie auch bei einer Verwendung für andere Zwecke die richtige Orientierung.
 
dodo2998 schrieb:
Wie eigentlich schon gesagt: Man kann das Bild in einem Bearbeitungsprogramm drehen. Oder man macht es mit CSS:
Zum Vergrößern anklicken....

IDs lassen sich als Hooks für JavaScript einsetzen, aber man sollte sie nie und unter keinen Umständen zum Stylen missbrauchen. Die Regel, nach der man innerhalb Stylesheets IDs für einmalige und Klassen für mehrfache Verwendung pro Seite definiert, ist Anno Tobak.

Der Grund dafür liegt in der übermäßig hohen Gewichtung von IDs im Vergleich zu Klassen anhand der CSS-Spezifikationen. Die ID hat einen Value von 100 und wird damit zehnmal so stark wie eine Klasse gewertet. Was bedeutet, dass wenn Attribute innerhalb der ID festgelegt werden, diese sich später kaum noch durch Klassen überschreiben lassen, und bei einem Portal mit vielen Unterseiten fällt so etwas nicht unbedingt auf.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben