|
||||
background-image und background-size
Moin.
Ich möchte Text durch ein Hintergrundbild ersetzen. Das Hintergrundbild soll seine Proportion behalten und die volle Breite des Elementes ausfüllen. Wenn ich für das Element mit dem Text keine Höhe explizit angebe, wird das Hintergrundbild gar nicht dargestellt. https://codepen.io/fermion/pen/QPoMPg?editors=1100 Wenn ich eine willkürlich gewählte Höhe angebe, wird zwar das Hintergrundbild dargestellt, füllt aber - erwartungsgemäß - nicht die volle Breite aus. https://codepen.io/fermion/pen/qwvXgv?editors=1100 Auch das Schlüsselwort "cover" löst die Aufgabe erwartungsgemäß nicht: https://codepen.io/fermion/pen/gyExJP?editors=1100 der Container wird in der Breite ausgefüllt, aber in der Höhe wird das Bild in der Höhe des Containers beschnitten. Wie löst man bitte so eine Aufgabe, wo das Hintergrund die volle Breite des Containers ausfüllen und seine Proportion beibehalten soll? Danke.
__________________
Geändert von AndreasB (28.04.2019 um 17:33 Uhr) |
Sponsored Links |
|
|||
Indem man dem Container keine feste Höhe gibt, sondern die Höhe anhand der gegebenen Proportionen des Bildes berechnet.
Beispiel - Bild (1800x400) dann width: 100vw; ergibt height: 22vw; |
Sponsored Links |
|
||||
Danke für Deinen Hinweis.
Das SVG-Bild hat die Proportionen 1689/650 Das entspricht 100/38.48 Ich habe Deinen Vorschlag entsprechend in https://codepen.io/fermion/pen/oOVpXy?editors=1100 umgesetzt. Aber es klappt nicht. Zudem hat der umschließende Container "page" ja keine fixe Breite in em, sondern "max-width: 40rem". Das Bild soll bei Breiten kleiner als diese, von rechts beschnitten werden ohne dass die Höhe gemindert wird. Grund: ganz links wird sich im Bild ein Logo befinden, welches bei schmaleren Viewport nicht in der Höhe schrumpfen soll. Ja, es ist kompliziert.
__________________
|
|
||||
Der erste Beitrag ist ein bisschen verwirrend. Da wäre ich ohne Deine jetzige Ergänzung auch eher in die Richtung von Sailor56 gegangen.
Ich hätte dafür einen kleinen hack verwendet: https://codepen.io/anon/pen/ROdjpQ Jetzt wo Du schreibst, dass das Bild eine fixe Höhe hat, stellt sich das ganze völlig anders dar. Wenn dem so ist, dann kann Du dem header ja auch eine fixe Höhe geben. Nämlich genau die 38.48% von 40rem, die ja scheinbar Deine Referenzgröße sein wird. https://codepen.io/anon/pen/KYEZGq |
|
|||
Zitat:
Dann ist es sinnvoller zwei Hintergrundgrafiken zu verwenden. Denen kannst du dann auch einfach eigene, unterschiedliche Verhaltensweisen mit auf den Weg geben. Siehe zum Beispiel https://developer.mozilla.org/de/doc..._CSS_verwenden |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navigation positionieren | maybebabe | CSS | 4 | 08.04.2013 23:17 |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Inline Listenelement wird nicht richtig im background befüllt | SteveB | CSS | 3 | 28.04.2011 21:41 |
Float-Reihenfolge? | wolf1985 | CSS | 0 | 21.08.2008 02:35 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |