Eternal Horizon
[Regeln] Skalierung von Bildern - Druckversion

+- Eternal Horizon (https://eternal-horizon.de)
+-- Forum: Informationen (https://eternal-horizon.de/forumdisplay.php?fid=1)
+--- Forum: Schwarzes Brett (https://eternal-horizon.de/forumdisplay.php?fid=4)
+--- Thema: [Regeln] Skalierung von Bildern (/showthread.php?tid=1494)



Skalierung von Bildern - Master Kon - 17.11.2019

Aufgrund der neuen Grafikregeln dürfen Bilder außerhalb des Profilbildes nicht mehr zugeschnitten werden. Um sie aber dennoch auf die richtige Größe für zum Beispiel eure Crewseiten oder Pinnwände zu bringen, gibt es hier einen kleinen, einfachen Guide für diejenigen, die sich mit HTML und CSS nicht so gut auskennen.

Skalieren von Bildern ist simpel und bedarf nur einer kleinen Zeile Code, die ihr euch hier gerne rauskopieren dürft.
Code:
<img src="BILDLINK" style="width: BILDBREITE;" />

Die Breite könnt ihr in Pixel angeben (zB. 150px) oder in Prozent (zB. 34%). Bei Prozent ist darauf zu achten, dass von der Gesamtgröße des Elements ausgegangen wird, welches das Bild umschließt.
Skaliert ihr nur mit der Breite, wird die Höhe des Bildes automatisch im richtigen Verhältnis angepasst.

Im folgenden ein paar Beispiele zur Veranschaulichung: Die Originalgröße von Kon beträgt 1748x2480 Pixel

Breite mit Pixelangabe
Code:
<img src="kon.png" style="width:200px;" />
Breite mit Prozentangabe 40%
Code:
<img src="kon.png" style="width:40%;" />
Breite mit Prozentangabe 100%
Code:
<img src="kon.png" style="width:100%;" />

Falls das Bildformat trotz Skalierung der Breite nicht in euer Raster passt, weil es zum Beispiel noch zu hoch ist, könnt ihr auch die Höhe indiviuell anpassen.
Code:
<img src="BILDLINK" style="width: BILDBREITE; height: BILDHÖHE;" />
Dabei müsst ihr aber beachten, dass es das Bild verzerrt, wenn ihr Breite und Höhe nicht im richtigen Verhältnis der Ursprungsgröße anpasst.

Breite und Höhe im richtigen Verhältnis
Code:
<img src="kon.png" style="width:200px; height:284px;" />
Breite und Höhe im falschem Verhältnis
Code:
<img src="kon.png" style="width:200px; height:350px;" />