Bild als Vollbild, aber nur wenn groß genug

[Gunnar Bittersmann]

@@Quincunx:

nuqneH

Habe meinen „Vorschlag“ überdacht und das Beispiel (jetzt kleineres Bildformat) mit Gunnars CSS-Lösung kombiniert, wobei das Image jetzt auch vertikal (mittels JS-Gefrickel) zentriert wird.

Das machst du so:
var pos = Math.round( (parseInt(innerHeight)/2)-(parseInt(img.obj.height)/2) );

Wozu parseInt()? window.innerHeight und img.obj.height sind schon numerische Werte.

Falls das auch ohne JS möglich ist, Super!… nur mir ist auch nach längerem herumprobieren kein Weg dazu eingefallen.

Sicher ist es das. Man kann auch in CSS rechnen – mit calc().

window.innerHeight / 2 sind 50vh.

img.obj.height / 2 sind 50% – wenn sich Prozente auf die Höhe des Bildes beziehen.

Was sie bei margin* nicht tun. Aber bei translate*().

Also einfach img { transform: translateY(calc(50vh - 50%)) }.

Oder img { transform: translate3d(0, calc(50vh - 50%), 0) }, damit’s über die GPU läuft. (Oder tun das 2D-Transformationen mittlerweile auch?)

Fertig. CSS – entdecke die Möglichkeiten!

Qapla'