Hallo zusammen,
Ich suche nach einer Möglichkeit Bilder und/oder Hintergrundbilder unproportional zu skalieren, d.h. das Bild passt sich der Größe des Viewport an, ob klein, groß, hochkant oder Querformat.

(Qualitätsverlust, Größe des Bildes und Ladeszeiten jetzt einfach mal außer Acht gelassen)

Leider habe ich bisher nur proportionale Skalierungen gefunden.

Kennt jemand eine Lösung die möglichst auf CSS beruht? Oder geht sowas nur mit JS?

Schöne Grüße
Jormungand.

Bildschirmfüllende Hintergrundgrafik

__________________
Undercover-Coon´s: unsere Miezen
Wolfshunde-Herne: unsere Hunde

Aber bitte dem Hintergrudbild alt="" geben.

Wer will schon, dass einem auf jeder Seite ein unsinniges "Hintergrundbild" vorgelesen wird?

__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.

Danke TanjaP., aber bei der Anleitung wird das Bild proportional vergrößert und verkleinert.
Ich suche eine Anleitung zum unproportionalen Skalieren. Das Bild wird dabei - je nach Browserfenster - gestretcht oder gequetscht.

Hat noch jemand was in petto?

Prozentuale Angaben der Höhe und Breite beim Bild bzw. dem Element, welches das Hintergrundbild enthält. Das wäre meine Lösung des ganzen ohne JS.

__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!

Das ist doch in Tanjas Beispiel der Fall.

Jetzt habe ich den Quelltext aus dem Beispiel 1:1 kopiert. Es geht wirklich!
Bei meinem Versuch hatte ich beim CSS body und html zu definieren.

Danke Tanja, für den super Tipp! Danke gato, dass du mich nochmal drauf hingewiesen hast.

Schöne Grüße
Jormungand

Warum benutzt du nicht einfach eine Prozentangabe, damit passt du Bilder auch an die Fenstergröße an.

@protonenbeschleuniger: Durch die Prozentangabe passt sich das Bild nicht dem Viewport an, sondern verwendet die gleiche Prozentzahl von width auch für height.

Nicht, wenn du sowohl width als auch height festlegst.

Prozentangaben für height basieren nur bei zwei Eigenschaften auf der width des Elternelements: margin und padding.