Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Question

Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Gefragt el 19 de Juli, 2009: Wann wurde die Frage gestellt
1852755 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich möchte, dass sich mein Hintergrundbild je nach Größe des Browserfensters ausdehnt und skaliert.

Ich habe einige Fragen auf Stack Overflow gesehen, die diese Aufgabe erfüllen, z. B. CSS-Hintergrund dehnen und skalieren zum Beispiel. Das funktioniert gut, aber ich möchte das Bild mit background , nicht mit einer img Tag.

Darin wird ein img Tag platziert wird, und dann mit CSS wir Tribut an die img Tag.

width:100%; height:100%;

Es funktioniert, aber diese Frage ist ein bisschen alt, und besagt, dass in CSS 3 die Größe eines Hintergrundbildes wird ziemlich gut funktionieren. Ich habe dies versucht Beispiel die erste aber das hat bei mir nicht geklappt.

Gibt es eine gute Methode, dies mit dem background-image Erklärung?

Gefragt el 19 de Juli, 2009 von Fábio Antunes

137 Stimmen

Hintergrundgröße: 100% 100%;

Kommentiert el 30 de August, 2014 von Andreas L.

9 Stimmen

Vielleicht kann diese Demo hilfreich sein: w3schools.com/cssref/

Kommentiert el 7 de Januar, 2015 von Davide

1 Stimmen

Mögliches Duplikat von CSS-Hintergrundbild an die Breite anpassen, Höhe sollte automatisch proportional skaliert werden

Kommentiert el 1 de Marsch, 2016 von Alex Angas

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

1151voto

Vashishtha Jogi Punkte 11930

CSS3 hat ein nettes kleines Attribut namens background-size:cover .

Dadurch wird das Bild so skaliert, dass der Hintergrundbereich unter Beibehaltung des Seitenverhältnisses vollständig vom Hintergrundbild abgedeckt wird. Der gesamte Bereich wird abgedeckt. Es kann jedoch sein, dass ein Teil des Bildes nicht sichtbar ist, wenn die Breite/Höhe des neu skalierten Bildes zu groß ist.

Beantwortet el 10 de September, 2011 von Vashishtha Jogi (11930 Punkte )

30 Stimmen

Cover beschneidet das Bild, wenn das Seitenverhältnis nicht stimmt, ist also keine gute allgemeine Lösung.

Kommentiert el 21 de Juni, 2013 von mahemoff

1 Stimmen

Für den Fall, dass Sie wollen, dass es in IE-Browsern funktioniert - github.com/louisremi/background-size-polyfill

Kommentiert el 26 de August, 2014 von Wreeecks

12 Stimmen

In Firefox scheint es nicht zu funktionieren. Wie auch immer, background-size: 100vw 100vh; erfüllt den Zweck gut.

Kommentiert el 28 de Januar, 2018 von Yannick Mauray

Anzeigen 4 weitere Kommentare

Answer 3

475voto

Matt Burgess Punkte 5028

Sie könnten die CSS3-Eigenschaft verwenden, um dies zu tun ganz nett. Sie passt die Größe an das Verhältnis an, sodass das Bild nicht verzerrt wird (obwohl sie kleine Bilder hochskaliert). Nur beachten Sie, es ist noch nicht in allen Browsern implementiert.

background-size: 100%;

Beantwortet el 28 de Februar, 2011 von Matt Burgess (5028 Punkte )

23 Stimmen

@nXqd Das ist so ziemlich der komplette Code! Erstellen Sie einen Container mit einem background-image und schließen die oben genannte Eigenschaft ein. Wie bereits erwähnt, ist die Browserunterstützung noch nicht gut und es gibt browserspezifische Versionen dieser dh. -webkit-background-size usw. Siehe W3C CSS3-Modul: background-size y css3.info: Hintergrund-Größe

Kommentiert el 20 de Juni, 2011 von MrWhite

19 Stimmen

Um das Seitenverhältnis des Bildes zu erhalten, sollten Sie "background-size: cover;" oder "background-size: contain;" verwenden. Ich habe ein Polyfill erstellt, das diese Werte im IE8 implementiert: github.com/louisremi/background-size-polyfill

Kommentiert el 5 de Dezember, 2012 von Louis-Rémi

4 Stimmen

Es ist auch ratsam, Folgendes hinzuzufügen auto um das Seitenverhältnis zu erhalten.

Kommentiert el 9 de Dezember, 2012 von Chibueze Opata

Anzeigen 1 weitere Kommentare

Answer 4

173voto

Nicht registrierter Benutzer Punkte 0

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

Beantwortet el 23 de Marsch, 2012 von Nicht registrierter Benutzer (0 Punkte )

0 Stimmen

Dies funktioniert jedoch nicht im IE8. Es erzeugt einen Rand am oberen und unteren Rand des Fensters.

Kommentiert el 16 de Februar, 2014 von erdomester

0 Stimmen

Unter Android funktionierte es bei der Verwendung von html, body {...} anstelle von body {...} .

Kommentiert el 7 de Marsch, 2016 von Edward

Answer 5

65voto

yeahdixon Punkte 6360

background-size: 100% 100%;

dehnt den Hintergrund so aus, dass er das gesamte Element auf beiden Achsen ausfüllt.

Beantwortet el 26 de Januar, 2016 von yeahdixon (6360 Punkte )

Answer 6

43voto

Thorsten Niehues Punkte 12754

Der folgende CSS-Teil sollte das Bild bei allen Browsern strecken.

Ich mache das dynamisch für jede Seite. Dazu verwende ich PHP, um für jede Seite einen eigenen HTML-Tag zu erzeugen. Alle Bilder befinden sich im Ordner "image" und enden mit "Bg.jpg".

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Wenn Sie nur ein Hintergrundbild für alle Seiten haben, können Sie die $pic Variable, entfernen Sie die Schrägstriche, passen Sie die Pfade an und platzieren Sie diesen Code in Ihrer CSS-Datei.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Dies wurde mit Internet Explorer 9, Chrome 21 und Firefox 14 getestet.

Beantwortet el 6 de August, 2012 von Thorsten Niehues (12754 Punkte )

2 Stimmen

Ihr Beispiel funktioniert nicht im Sinne der Abwärtskompatibilität, weil Sie einfach das führende '-' der Herstellerpräfixe vergessen haben. Es muss sein -webkit-background-size , -moz-background-size und so weiter. Siehe developer.mozilla.org/de-US/docs/CSS/ Oder Sie entscheiden sich dafür, es zukunftssicher in eine Shorthand-Eigenschaft wie background: url(img/bg-home.jpg) no-repeat center center / cover fixed;

Kommentiert el 8 de Kann, 2013 von Volker E.

Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: