Support » Themes » Beitragsbild bei TwentySeventeen strecken

  • Gelöst truncate

    (@truncate)


    Hallo zusammen,

    ich habe das Problem, dass meine Beitragsbilder zwar ordentlich angezeigt werden, aber wenn ich eine sehr hohe Auflösung beim Betrachten habe, kommt mir links und rechts davon ein grauer Balken. Ähnlich, wenn ich mir die mobile Version am Smartphone ansehe. Da habe ich dann direkt unter dem Beitragsbild einen grauen Balken.

    Wie kann ich es am einfachsten hinbekommen, dass das Beitragsbild immer das Anzeigefeld komplett ausfüllt?

    PS: Da mir die Beitragsbilder immer etwas zu groß waren, habe ich Folgendes noch zusätzlich im CSS eingefügt:

    .single-featured-image-header{
    height: 50vh;
    }
    • Dieses Thema wurde geändert vor 8 months, 3 weeks von truncate.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Ist das Problem gelöst? Sieht jedenfalls so aus.

    Leider ebenfalls nicht. Siehe meinen Screenshot: Screenshot

    Links und rechts vom Beitragsbild isses richtig unschön grau. Hier wäre es halt schick, wenn das Bild auch mit größer werden würde und evtl. sogar nen Parallax Effekt hätte und nicht so statisch wäre.

    • Diese Antwort wurde geändert vor 8 months, 2 weeks von truncate.
    .single-featured-image-header img {
        width: 100%;
    }

    OK. Cool. Soweit so gut. Vielen lieben Dank! Aber^^ bekomm ich diese graue Fläche auch noch weg, ohne dass sich das Bild brutal verzerrt? Screenshot

    Jep, du musst den Wert:

    .single-featured-image-header {
       height: 40vh;
    }

    per Media Query anpassen. Tritt ja nur im mobile auf.

    Vielen lieben Dank für deine schnelle und unkomplizierte Hilfe 🙂

    @truncate
    gerne 🙂

    Allerdings hast du da einen Fehler gemacht. Ist dir nicht aufgefallen, dass die Bilder jetzt verzerrt sind?

    Lösche mal wieder das height: 40vh; aus dem Code-Schnipsel:

    .single-featured-image-header img {
        width: 100%;
        height: 40vh;
    }

    und füge diesen Code-Schnipsel in die Zusätzliche CSS:

    @media screen and (max-width: 599px) {
    .single-featured-image-header {
    		height: auto;	
    		max-height: 200px;
    	}
    }
Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Das Thema „Beitragsbild bei TwentySeventeen strecken“ ist für neue Antworten geschlossen.