Und schon wieder habe ich einen HTML/CSS-Fall, bei dem ich einfach zu keiner Lösung komme...
Ich habe oben auf der Seite ein Bild. Im Prinzip ist es völlig egal, wie groß das ist, aber in meinem Beispiel wäre es 1920x1080 Pixel.
Ich möchte, dass dieses Bild immer 100% der Viewport-Breite einnimmt und die Höhe dann proportional ist. ABER: das Bild soll maximal 50% der Viewport-Höhe einnehmen. Der Rest soll dann einfach abgeschnitten werden (also kein Verzerren).
Es gibt da total viele Möglichkeiten, aber keine klappt so richtig. Z. B. mit background-image statt img-Tag arbeiten. Problem: Der Container für die background-image-Eigenschaft lässt sich nicht auf 50% Höhe stellen, weil er maximal so hoch wie der Inhalt ist (es gibt aber keinen Inhalt). Überhaupt erfordern alle Möglichkeiten konkrete Höhenangaben in px oder em. Ich habe aber nur %. Ich habe eine Möglichkeit mit % gefunden, aber die hatte position:absolute und damit wurde das Bild über andere Objekte gesetzt.
Gibt es überhaupt eine Möglichkeit? Bitte ohne JS und mit einigermaßen passablem Browsersupport.
Ich habe oben auf der Seite ein Bild. Im Prinzip ist es völlig egal, wie groß das ist, aber in meinem Beispiel wäre es 1920x1080 Pixel.
Ich möchte, dass dieses Bild immer 100% der Viewport-Breite einnimmt und die Höhe dann proportional ist. ABER: das Bild soll maximal 50% der Viewport-Höhe einnehmen. Der Rest soll dann einfach abgeschnitten werden (also kein Verzerren).
Es gibt da total viele Möglichkeiten, aber keine klappt so richtig. Z. B. mit background-image statt img-Tag arbeiten. Problem: Der Container für die background-image-Eigenschaft lässt sich nicht auf 50% Höhe stellen, weil er maximal so hoch wie der Inhalt ist (es gibt aber keinen Inhalt). Überhaupt erfordern alle Möglichkeiten konkrete Höhenangaben in px oder em. Ich habe aber nur %. Ich habe eine Möglichkeit mit % gefunden, aber die hatte position:absolute und damit wurde das Bild über andere Objekte gesetzt.
Gibt es überhaupt eine Möglichkeit? Bitte ohne JS und mit einigermaßen passablem Browsersupport.