Header-Bild soll 100% der Viewport-Breite und maximal 50% der Viewport-Höhe einnehmen (und dann gecroppt werden)

  • CSS

Es gibt 14 Antworten in diesem Thema. Der letzte Beitrag () ist von Takafusa.

    Header-Bild soll 100% der Viewport-Breite und maximal 50% der Viewport-Höhe einnehmen (und dann gecroppt werden)

    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.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Moin,

    es gibt auch viewportbezogene Größeneinheiten. Vielleicht reicht dir das ja schon, wenn du max-height: 50vh einstellst. Der Browsersupport ist auch ok: CanIUse

    MDN schrieb:

    vh
    Equal to 1% of the height of the viewport's initial containing block.

    vw
    Equal to 1% of the width of the viewport's initial containing block.
    Mit freundlichen Grüßen,
    Thunderbolt
    Vielen Dank, das funktioniert! vh ist offenbar relative und absolute Angabe zugleich! :)

    Jetzt versuche ich gerade noch, das Bild nicht nur unten, sondern oben und unten zu croppen, also das Bild quasi zu zentrieren. Dazu habe ich zwei Möglichkeiten gefunden. Die erste arbeitet u. a. mit position: absolute; und transform: translate(-50%,-50%); (siehe jonathannicol.com/blog/2014/06…crop-thumbnails-with-css/), erfordert aber leider eine feste Höhe des Containers (ich habe nur eine feste maximale Höhe).

    Dann gibt es noch object-fit, wenn auch mit relativ schlechtem Browsersupport. Aber das würde ich schon nehmen. Funktioniert aber wohl auch nicht ohne feste Höhenangabe:

    HTML-Quellcode

    1. <header class="pageheader">
    2. <img src="/images/image.jpg" alt="" />
    3. </header>

    CSS-Quellcode

    1. .pageheader {
    2. width: 100%;
    3. height: auto;
    4. max-height: 50vh;
    5. overflow: hidden;
    6. }
    7. .pageheader img {
    8. width: 100%;
    9. height: auto;
    10. object-fit: cover;
    11. object-position: center;
    12. }

    object-fit zeigt hier durchaus Wirkung, aber object-position wird ignoriert.

    Gibt es dafür eine Lösung?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Ich hab's rausgefunden. Alle Parent-Elemente/-Container müssen eine Höhe haben. html und body hatte ich schon auf 100%, aber ich habe um den Header drumherum noch main. Setze ich das auch auf 100%, dann klappt es. .pageheader und .pageheader img aus meinem Beispiel habe ich auch auf 100% gesetzt.

    EDIT: Wobei die Lösung noch nicht perfekt ist, weil ich durch das Setzen von height beim main-Tag leider alles unterhalb des main-Bereichs verschiebe (entweder ist es unsichtbar oder mitten im Bild). Ich könnte main einfach wegnehmen, aber ich wollte die HTML-Struktur ordentlich machen.

    EDIT #2: Hier noch ein JSFiddle, welches mein Problem verdeutlicht: jsfiddle.net/bju3918v/
    Wie man sieht, sieht man den Footer nicht. Setze ich height von main auf z. B. 50%, dann sieht man den, aber ich möchte natürlich, dass main so hoch ist wie dessen Inhalt.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Du könntest html & body die Eigenschaften display: flex & flex-direction: column (flex-direction: column stapelt die Elemente vertikal) zuweisen und dem footer die Eigenschaft flex: 1.

    CSS-Quellcode

    1. html, body {
    2. height: 100%;
    3. display:flex;
    4. flex-direction: column;
    5. }
    6. footer{
    7. flex:1;
    8. }
    Danke, allerdings löst das mein Problem nicht. Ohne feste Größenangabe beim main-Container klappt mein Bildcropping nicht. Und das Umstellen auf "flex" ändert nichts daran, dass 100% height bei main das gesamte Fenster ausfüllt und nichts mehr drunter stehen kann. Oder verstehe ich dich falsch?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Ich meinte das so:



    CSS-Quellcode

    1. html, body {
    2. height: 100%;
    3. display:flex;
    4. flex-direction: column;
    5. }
    6. main {
    7. height:100%;
    8. }
    9. footer{
    10. flex:1;
    11. }
    12. img {
    13. object-fit: cover;
    14. width: 100%;
    15. height:100%;
    16. }
    17. div {
    18. width: 100%;
    19. height:100%;
    20. overflow: hidden;
    21. }
    22. .max-height {
    23. max-height: 50vh;
    24. height: 100%;
    25. }
    Im JSFiddle geht's allerdings nicht: jsfiddle.net/sakzo106/

    EDIT: In einem eigenen/neuen Dokument geht's allerdings schon. Ich werde schauen, ob ich das auch in meiner Website hinbekomme...

    EDIT #2: Mache ich unterhalb des Bildes innerhalb des main-Bereichs nur ein einziges div, so stimmt es nicht mehr. Der Footer ist dann in der Mitte, nicht mehr unten. Er ist zudem mittem im div, über dessen Inhalt. Das ist mein Problem.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Der neue DIV im Main -Container hat ja auch eine Höhe von 100%. Zu diesen 100% kommt dann noch mindestens die Höhe des Bildes und damit ist die Content -Höhe größer der Main -Container -Höhe. Der Main -Container hat aber kein overflow und somit bricht der Content das Layout. Das könnte man mit main { overflow: auto } lösen unter der Voraussetzung das man den Header auch immer am oberem Bildschirmrand haben will. Wenn nicht könnte man den Footer mit z.B. position: fixed fest positionieren das hat aber den Nachteil das der Footer dann eine feste Höhe benötigt. Diese muss dann von der Höhe des Main - Containers abgezogen werden.

    Fakiz schrieb:

    Der neue DIV im Main -Container hat ja auch eine Höhe von 100%.

    Oh, das war ein Versehen. Die divs innerhalb des mains sollten natürlich jeweils nur ihre tatsächlich benötigte Größe haben.

    Setze ich beim main noch overflow: auto;, so bleibt der Footer immer sichtbar, was auch nicht sein soll. Und ohne overflow steht er wieder mitten drin. Siehe jsfiddle.net/4235vans/

    Ich befürchte, mein Vorhaben ist gar nicht umsetzbar. Vielleicht verzichte ich einfach aufs Cropping des Bildes oder mache das direkt in Photoshop und stelle verschiedene Versionen je nach Bildschirmformat bereit.

    Ein bisschen probiere ich noch rum, vielleicht kommt mir noch eine Eingebung.

    Danke auf jeden Fall soweit!

    EDIT: Ich mache es nun ganz anders. Das Bild wird niemals beschnitten, sondern verkleinert und dann erscheint links und rechts ein farbiger/leerer Bereich. Alles andere ist zu aufwendig und gleichzeitig auch nicht schön.

    Das Thema hat sich also erledigt. Nochmal danke!
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Ist zwar erledigt, aber ich glaube das ist es:

    Quellcode

    1. <style>
    2. img {
    3. width: 100%;
    4. object-fit: cover;
    5. height: 50vh;
    6. }
    7. .max-height {
    8. max-height: 50vh;
    9. }
    10. footer{
    11. flex:1;
    12. }
    13. </style>


    Sieht dann so aus
    https://streamable.com/rkzekr
    Oh. ;) Ich hatte es erst in meinem JSFiddle getestet und da war's falsch. Beim 2. Mal ging's dann aber komischerweise, auch lokal in einem eigenen Dokument.

    Vielen Dank, auch wenn ich es jetzt anders mache. Aber in Zukunft werde ich das sicher brauchen können.

    Übrigens kann das hier dann wohl raus:

    CSS-Quellcode

    1. footer{
    2. flex:1;
    3. }
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum