Beitragsbild bei TwentySeventeen strecken

Gelöst Steffen
(@truncate)

vor 5 Jahren, 1 Monat
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 5 Jahren, 1 Monat 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 5 Jahren, 1 Monat

Ist das Problem gelöst? Sieht jedenfalls so aus.
Thread-Starter Steffen
(@truncate)

vor 5 Jahren, 1 Monat
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 5 Jahren, 1 Monat von Steffen.
Moderator Angelika Reisiger
(@la-geek)

vor 5 Jahren, 1 Monat
```
.single-featured-image-header img {
    width: 100%;
}
```
Thread-Starter Steffen
(@truncate)

vor 5 Jahren, 1 Monat

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 5 Jahren, 1 Monat
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 5 Jahren, 1 Monat

Vielen lieben Dank für deine schnelle und unkomplizierte Hilfe 🙂
Moderator Angelika Reisiger
(@la-geek)

vor 5 Jahren, 1 Monat
@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.

Beitragsbild bei TwentySeventeen strecken

Themen-Schlagwörter

Ansichten