Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie macht man Bilder mit CSS adaptiv? Einführung in die Methode der adaptiven Größe von CSS-Bildern

不言
Freigeben: 2018-09-11 13:45:08
Original
19557 Leute haben es durchsucht

Für eine Webseite ist es sehr attraktiv, ein gut aussehendes und klares Hintergrundbild zu haben, aber nicht jedes Bild hat die gleiche Größe, daher ist es notwendig, das Xi'an-Bild anzupassen. Wie wäre es also mit CSS? geht es darum, Bilder anpassungsfähig zu machen? In diesem Artikel wird die Methode der adaptiven Größe von CSS-Bildern vorgestellt.

Schauen wir uns direkt ein Beispiel an:

<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... --></div>
Nach dem Login kopieren
#web_bg{
  position:fixed;  
  top: 0;  
  left: 0;  
  width:100%;  
  height:100%;  
  min-width: 1000px;  
  z-index:-10;  
  zoom: 1;  
  background-color: #fff;  
  background-repeat: no-repeat;  
  background-size: cover;  
  -webkit-background-size: cover;  
  -o-background-size: cover;  
  background-position: center 0;
}
Nach dem Login kopieren

Für das obige Beispiel analysieren wir, wie dieser CSS-Code die Bildgröße adaptiv ändert.

Werfen wir zunächst einen Blick auf die Rolle dieser drei Sätze in der adaptiven CSS-Bildgröße:

  position:fixed;  
  top: 0;  
  left: 0;
Nach dem Login kopieren

Erklärung: Diese drei Sätze fixieren den gesamten Div-Container oben und unten des Bildschirms.

Zweitens werfen wir einen Blick auf die Rolle der folgenden Sätze in der adaptiven Größe von CSS-Bildern:

  width:100%;  
  height:100%;  
  min-width: 1000px;
Nach dem Login kopieren

Erklärung: Diese Sätze sorgen dafür, dass das gesamte Div die gleiche Größe wie der Bildschirm hat, wodurch eine vollständige Darstellung erreicht wird screen Der Zweck von min-width besteht darin, die Größe des Divs unverändert zu lassen, wenn die Bildschirmbreite innerhalb von 1000 Pixel liegt. Das heißt, in diesem Fall sollte das Bild beim Skalieren der Bildschirmbreite nicht skaliert werden (es ist nur gültig). innerhalb von 1000px).

Als nächstes schauen wir uns diesen Code an:

  z-index:-10;
Nach dem Login kopieren

Erklärung: Dadurch wird das gesamte Div unter jeder Ebene in der HTML-Seite platziert. Unter normalen Umständen ist die erste erstellte Ebene z Der Wert von -. Der Index ist 0. Wenn wir also -1 hier schreiben, kann dies auch erreicht werden. Wenn Sie hier jedoch -10 schreiben, wird sichergestellt, dass sich das gesamte Div unten befindet, denn wenn die Seite zu viele Ebenen enthält, kann es vorkommen, dass -1 verwendet wird nicht unbedingt unten stehen, aber es macht keinen Sinn, wenn es als große Zahl wie -100 geschrieben wird. Verwenden Sie den Index: -10 Auf diese Weise kann es wie ein Hintergrundbild aussehen, aber es ist tatsächlich das gewöhnlichste Div. Nur die hierarchische Beziehung hat sich geändert, sodass es wie ein Hintergrundbild aussieht.

  background-repeat: no-repeat;
Nach dem Login kopieren

Hinweis: Dies ist der Hintergrund, wiederholen Sie ihn nicht.

  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
Nach dem Login kopieren

Erklärung: Die obigen drei Sätze haben die gleiche Bedeutung, nämlich die Skalierung des Bildes synchron mit der Bildschirmgröße, aber einige Teile werden möglicherweise beschnitten, aber nicht angezeigt. Die folgenden beiden Sätze sind für Chrome- und Opera-Browser kompatibel.

Schauen wir uns zum Schluss noch den letzten Satz an:

background-position: center 0;
Nach dem Login kopieren

Erklärung: Der obige Satz bezeichnet die Position des Bildes, zentriert und linksbündig ausgerichtet.

Der obige Artikel endet hier. Wenn Sie mehr über die verschiedenen im obigen CSS-Code erwähnten Eigenschaften erfahren möchten, können Sie sich das CSS-Handbuch ansehen.

Verwandte Empfehlungen:

css image adaptive size_image Spezialeffekte

So verwenden Sie CSS, um Bilder an den Bildschirm anzupassen ?

Das obige ist der detaillierte Inhalt vonWie macht man Bilder mit CSS adaptiv? Einführung in die Methode der adaptiven Größe von CSS-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage