Bild proportional skalieren
Maymay
- css
Ich möchte ein Bild proportional skalieren. Das Seitenverhältnis des Bildes soll beibehalten werden und das Bild soll sich jeweils an die aktuelle Höhe oder Breite des Browserfensters anpassen und dabei immer ausfüllen, d. h. Überstehendes wird nicht angezeigt.
Wenn ich ein DIV-Element anlege, darin das Bild, kann ich sehr einfach Höhe und Breite auf 100% stellen, aber das Bild wird verzerrt. Setze ich z. B. nur die Breite auf 100%, kann es passieren, dass das Bild nicht das ganze Browserfenster ausfüllt, es wird aber proportional skaliert. Ich möchte, dass das Bild das ganze Browserfenster ausfüllt, es proportional skaliert und überstehendes nicht angezeigt wird. Hat mich jemand verstanden und kann mir helfen? Ich habe noch keine Lösung gefunden.
Beispiel für eine nicht proportionale Skalierung:
#XY { width=100%; height=100% }
#XY img { width=100%; height=100% }
<div id="XY">
<img src="XY.jpg" alt="">
</div>
Moin Moin!
Benutze Photoshop, Gimp oder eine andere Bildbearbeitungssoftware, um das Bild zu skalieren, das spart in aller Regel auch Übertragungsvolumen.
Alexander