Nicht ein englischer Muttersprachler, also gibt es wahrscheinlich eine bessere Möglichkeit, die Frage zu formulieren ... trotzdem:
Was ich erstellen möchte, ist dem Header hier ähnlich: Ссылка Das Header-Bild wird vollständig in allen Bildschirmgrößen angezeigt, und das Seitenverhältnis des Bildes ist natürlich immer korrekt. Dies geschieht mit einem und der Text erscheint auf der Verwendungsstelle: absolut.
Aber wenn Sie css als Hintergrundbild anstelle von einem verwenden, erhalten Sie etwas wie diesen Header: Ссылка Größe des Browsers ändern, damit Teile des Hintergrunds nicht angezeigt werden.
Ist es möglich, einen div-Look zu erstellen und sich wie der erste Link zu verhalten, indem Sie die CSS-Eigenschaft background-image wie auf der zweiten Verbindung verwenden? Oder muss ich ändern, wie meine gesamte Kopfzeile funktioniert und die für den Hintergrund verwenden, damit sie vollständig in allen Bildschirmgrößen angezeigt wird?
Ich würde gerne einen Header-Hintergrund haben, der nichts ausradiert, aber so fixiert ist Ссылка Einzige Idee ist bisher, ein transparentes PNG zu erstellen, das das richtige Verhältnis des Bildes hat, und dann ein Hintergrundbild zu verwenden, das Hintergrund-Anhang hat: behoben. Aber das scheint nicht sehr schlau zu sein.
Hoffentlich war ich klar genug, dass ich verstanden werde. Vielen Dank im Voraus!
Hier ist ein netter und einfacher Tipp mit nur css / html:
Zutaten
Transparentes PNG-Bild mit dem gewünschten Verhältnis (transparent-ratio-conserver.png)
tag
Verschiedene Bilder für verschiedene View-Ports (retina.jpg, desktop.jpg, tablet.jpg ...)
Die Idee ist, ein Tag zu öffnen und ihm ein transparentes Bild (mit unserem gewünschten Verhältnis) zuzuweisen. Wir fügen auch class="responsive-image" hinzu, das alles in HTML ist.
%Vor%Im CSS legen wir die Hintergrundgröße fest und wählen die Breite unseres Bildes.
%Vor%und schließlich servieren wir für jeden View-Port das richtige Bild:
%Vor%Sie können die Demo von hier herunterladen.
Dies geschieht mit der Eigenschaft background-size:
%Vor%Cover wird das Bild so klein wie möglich machen, während es immer noch das gesamte Elternteil bedeckt und sein Seitenverhältnis beibehält.
Vielleicht möchten Sie auch contain ausprobieren, was das Bild so groß wie möglich macht, während es noch in das Elternteil passt.
Quelle (n)
Ich denke, es gibt eine bessere Lösung als contain oder cover (was für mich nicht funktioniert, btw).
Hier ist ein Beispiel, das ich kürzlich für ein Logo verwendet habe:
Nun haben wir ein responsives div mit einem Hintergrundbild, dessen Größe auf die volle Breite des div eingestellt ist.
Sie müssen nur das Verhältnis von Höhe zu Breite an das Element übergeben. Für ein Bild 1400x600;
1400: 600 = 98:42
%Vor%würde dasselbe wie
anzeigen %Vor%Tags und Links css responsive-design background-image