Beitragsbild bei TwentySeventeen strecken

  • Gelöst Steffen

    (@truncate)


    vor 6 Jahren

    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 6 Jahren von Steffen.

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

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Angelika Reisiger

    (@la-geek)

    vor 6 Jahren

    Ist das Problem gelöst? Sieht jedenfalls so aus.

    Thread-Starter Steffen

    (@truncate)

    vor 6 Jahren

    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 vor 6 Jahren von Steffen geändert.
    Moderator Angelika Reisiger

    (@la-geek)

    vor 6 Jahren

    .single-featured-image-header img {
    width: 100%;
}
    Thread-Starter Steffen

    (@truncate)

    vor 6 Jahren

    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

    Moderator Angelika Reisiger

    (@la-geek)

    vor 6 Jahren

    Jep, du musst den Wert:

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

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

    Thread-Starter Steffen

    (@truncate)

    vor 6 Jahren

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

    Moderator Angelika Reisiger

    (@la-geek)

    vor 6 Jahren

    @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.

Schlagwörter