1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Bild im div wird nicht komplett angezeigt

Dieses Thema im Forum "Design" wurde erstellt von mbhh, 4. Oktober 2019.

  1. mbhh

    mbhh Well-Known Member

    Registriert seit:
    7. März 2014
    Beiträge:
    91
    Zustimmungen:
    1
    Hallo zusammen,

    ich möchte gerne einem div ein Hintergrundbild geben, das dann mit dem div skaliert werden kann. Auf dem Bild soll ein Text stehen.

    Momentan scheitere ich leider bereits dabei, das Bild komplett anzeigen zu lassen. Die Breite ist da, aber die Höhe wird abgeschnitten. Habe alles mögliche probiert, bisher erfolglos.

    Wer hat einen Tipp für mich?

    Das ist der Code meines kleinen Tests:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Und hier kann man sich das Ergebnis ansehen

    http://vintoo.com/test.htm

    Was muss ich ändern? Danke.

    Gruß
    Michael
     
    #1 mbhh, 4. Oktober 2019
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Ein Hintergrundbild belegt keinen Platz, sorgt als nicht dafür, dass das Elternelement sich an dessen Größe anpasst.
    Du musst also deinem <div> zunächst eine Größe (Höhe und Breite / zB 'height: 50vh; width: 50vh;')) geben und dann dem Hintergrundbild sagen, wie es sich im verfügbare Platz verhalte soll (zB 'background-size: cover;')
     
    #2 Sailor56, 4. Oktober 2019
  3. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.660
    Zustimmungen:
    1.783
    #3 b3317133, 4. Oktober 2019
  4. mbhh

    mbhh Well-Known Member

    Registriert seit:
    7. März 2014
    Beiträge:
    91
    Zustimmungen:
    1
    Ok, danke, hab's geändert, klappt.

    Warum funktioniert es nicht, wenn man für height und width 50% angibt?
     
    #4 mbhh, 4. Oktober 2019
  5. mbhh

    mbhh Well-Known Member

    Registriert seit:
    7. März 2014
    Beiträge:
    91
    Zustimmungen:
    1
    Alternative Einbindung wie im Beispielthread: schaue ich mir an.
     
    #5 mbhh, 4. Oktober 2019
  6. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.660
    Zustimmungen:
    1.783
    Du gibst auch jetzt 50% an, vom sichtbaren Viewport (vw = viewport width, vh = viewport height), daher sowas stets mit diversen Bildschirm- / Browsergrössen austesten...
     
    #6 b3317133, 4. Oktober 2019
  7. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Weil die Angabe in % keine wirkliche Größenangabe ist... es sagt xx% des verfügbare Platzes - und dieser verfügbare Platz wird von dem Elternelement vorgegeben. In deinem Fall das <body> ... der ist nun mal in Höhe und Breite unterschiedlich.
    Dagegen sind vh und vw tatsächlich messbare Größen, die von Breite bzw Höhe der Bildschirmanzeige abhängig sind und sich deswegen für solche Skalierung eignen.
    In Kurzform.. 50% sind die Hälfte des verfügbaren Platzes (in der Regel ergibt das bei height und width unterschiedliche Werte)
    50vw - die Hälfte der Bildschirmbreite
    50vh - die Hälfte der Bildschirmhöhe
     
    #7 Sailor56, 4. Oktober 2019
    SirEctor gefällt das.
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden