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. |
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; |
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 |
@hemfrie
Herzlichen Dank. So funktioniert es in der Tag. Sehr schön. Und mit "calc(...)" kann man die Berechnung auch gleich im CSS durchführen lassen. @mcmurphy Grundsätzlich hast Du natürlich Recht: man kann auch mit zwei Hintergrundbildern arbeiten. Aber ich vermute, dass damit nichts gewonnen wäre, weil es keine Situationen gibt, wo die beiden Bildern nicht nebeneinander stehen werden. Ich selber bin insgesamt kein Freund dieser komplizierten Headerbild-Zuppeleien, aber die Grafikerin wünscht sich das so. Siehe auch den anderen noch ungelösten Thread zur Frage der Art der Einbindung eines JPGs in ein SVG, welches als Hintergrundbild verwendet wird. Dort hatte ich ja durch Experimente gezeigt, dass nur die Inline-Einbettung möglich ist und nicht die Einbettung als Verknüpfung. |
Alle Zeitangaben in WEZ +2. Es ist jetzt 07:37 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023