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

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>

#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;
}

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;

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;

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;

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;

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

  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

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;

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!