Background-Image automatisch proportional skalieren?

  • Hallo zusammen,


    ich erarbeite grade als Uniprojekt mein responsives Portfolio.


    Dabei möchte ich ein großes Bild als Header in den Hintergrund einbinden.


    Jetzt meine Frage:
    Bekommt man das irgendwie hin, dass sich die Höhe des DIV, automatisch an die Größe des Bildes anpasst?
    Sprich, wenn der Viewport in der Breite kleiner wird, wird der Header auch in der Höhe kleiner..


    Mit den CSS Zeilen wird das HG Bild immer beschnitten wenn der Browser kleiner wird.


    Für Ideen wäre ich sehr dankbar!


    Dankeschön!


    Liebe Grüße,
    Matthias

  • Hallo


    Zitat

    Bekommt man das irgendwie hin, dass sich die Höhe des DIV, automatisch an die Größe des Bildes anpasst?


    Ja. Du musst einfach die Einheit für die Breite (in deinem Beispiel vw) auch für die Höhe nehmen.


    Für ein konkretes Beispiel benötigen wir das originale Bild oder zumindest seine Größe in Pixel.


    Gruss


    MrMurphy

  • Ja. Du musst einfach die Einheit für die Breite (in deinem Beispiel vw) auch für die Höhe nehmen.


    Für ein konkretes Beispiel benötigen wir das originale Bild oder zumindest seine Größe in Pixel.

    Wenn ich 100vh oder 100vw als DIV Höhe angebe, wird das DIV vollflächig über den gesamten Viewport gelegt.


    Was ich aber brauche, ist nicht eine Skalierung des DIV-Containers an sich, sondern dessen Inhalt, sprich des Background-image.


    Oder reden wir aneinander vorbei? :rolleyes: ;)


    Das Bild im Hintergrund ist sehr groß, damit es auch noch bei Retinadisplays ordentlich aussieht. Die aktuelle Bildversion hat 5120 x 2261 pixel.

  • Hallo


    Zitat

    Oder reden wir aneinander vorbei?


    Nein, du liest an meiner Antwort vorbei.


    Ich habe geschrieben als Einheit vw nehmen.


    Was antwortest du: 100vh oder 100vw


    vh ist also schon mal falsch.


    Zum Wert habe ich überhaupt nichts geschrieben da ich den erst berechnen kann wenn ich die Bildgröße kenne. Also ist 100 auch falsch.


    Um den Wert zu errechnen reicht ein einfacher Dreisatz: 5120px verhält sich zu 2261px wie 100vw zu ?


    ? ist demnach 44,16vw


    Info: Mehr als zwei Nachkommastellen sind unsinnig und bringen praktisch nichts.


    Damit das Bild immer proportional korrekt und vollständig angezeigt wird benötigst du also folgendes CSS:


    Code
    1. .header_project {
    2. width: 100vw;
    3. height: 44.16vw;
    4. background-size: cover;
    5. min-width: 400px;
    6. background-image: url(/images/header_glueckshonig.jpg);
    7. }


    Bei anderer Bildgröße oder anderer width-Angabe muss die height-Angabe angepasst werden.


    Zeitweise mal eine Beispielseite mit einem anderen Bild und deshalb natürlich einer anderen height-Angabe:


    http://boratb.bplaced.net/index02.html


    Zitat

    Das Bild im Hintergrund ist sehr groß, damit es auch noch bei Retinadisplays ordentlich aussieht. Die aktuelle Bildversion hat 5120 x 2261 pixel.


    An alle, die sich nicht auskennen: Nicht übernehmen. Ablon legt keinen Wert auf benutzerfreundlichkeit.


    Gruss


    MrMurphy

  • Mr Murphy, sorry hab dich beim ersten Erklärversuch nicht verstanden.
    Jetzt leuchtets mir aber ein, danke dafür!


    Anstatt meine Bildgröße zu von oben herab zu kritisieren, könntest du auch konstruktive Kritik geben..
    Ich habe ja nicht gesagt, dass kleinere Bilder mit Media Queries nicht eingebunden werden sollen...

  • Hallo


    In einem anderen Beitrag hast du deutlich zum Ausdruck gebracht dass dich benutzerfreundlichkeit nicht interessiert beziehungsweise du keine Kommentare für dich dazu wünschst.


    Zitat

    Mach dir keine Sorgen über Usebility und Zielgruppe meines Portfolios.
    In erster Linie ist es ein Uniprojekt, bei dem es um innovative Gestaltung geht..


    Das Problem ist dass auch Andere die Beiträge hier lesen und ohne entsprechende Hinweise meinen gültige und sinnvolle Informationen zu erhalten.


    Zitat

    Ich habe ja nicht gesagt, dass kleinere Bilder mit Media Queries nicht eingebunden werden sollen...


    Darum geht es auch gar nicht. Es ist schlicht unsinnig überhaupt so große Bilder in eine Webseite einzubinden. Sowas ist schlicht benutzerunfreundlich und sinnfrei.


    Leider wird immer wieder verbreitet, dass für hochauflösende Displays große Bilder sinnvoll und wünscheswert seien. Das ist aber schlicht falsch. Deshalb weise ich darauf hin. Auch wenn mir bewußt ist, das damit infizierte Webseitenersteller rationalen Argumenten häufig nicht mehr zugänglich sind.


    Gruss


    MrMurphy