Heim >Web-Frontend >CSS-Tutorial >Wie erreicht man mit CSS die gleiche Skalierung der Bilder auf der Seite? (Beispiel)
Wie erreicht man mit CSS die gleiche Skalierung der Bilder auf der Seite? (Beispiel)
- 藏色散人Original
- 2018-08-13 17:11:086580Durchsuche
Beim Durchsuchen der Seite oder bei der eigentlichen Arbeit stoßen wir gelegentlich auf Probleme mit der Bildskalierung. In diesem Artikel wird Ihnen das Problem der gleichen Skalierung von CSS-Bildern vorgestellt, dh der gleichen Proportionalität der Anzeige von CSS-Bildern. Ich hoffe, es hilft Freunden in Not.
Das spezifische Codebeispiel zum Anzeigen von CSS-Bildern in gleichen Proportionen lautet wie folgt:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css图片等比例显示代码示例</title>
<meta charset="UTF-8">
<style type="text/css">
.demo1-1 {
float: left;
width: 200px;
height: 200px;
overflow: hidden;
}
.zoomImage {
width: 100%;
height: 0;
padding-top: 100%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
</style>
</head>
<body>
<div class="demo1-1">
<div class="zoomImage" style="background-image: url(2.png)"></div>
</div>
</body>
</html>Der Effekt ist wie folgt:
Hinweis: Das Attribut „background-size“ gibt die Größe des Hintergrundbilds an.
Mögliche Werte:
1. Länge
Legen Sie die Höhe und Breite des Hintergrundbilds fest. Der erste Wert legt die Breite und der zweite Wert die Höhe fest. Wenn nur ein Wert eingestellt ist, wird der zweite Wert auf „auto“ gesetzt.
2. Prozentsatz
Legen Sie die Breite und Höhe des Hintergrundbilds als Prozentsatz des übergeordneten Elements fest. Der erste Wert legt die Breite und der zweite Wert die Höhe fest. Wenn nur ein Wert eingestellt ist, wird der zweite Wert auf „auto“ gesetzt.
3. Abdeckung
Erweitern Sie das Hintergrundbild auf eine ausreichend große Größe, sodass das Hintergrundbild den Hintergrundbereich vollständig abdeckt. Einige Teile des Hintergrundbilds werden möglicherweise nicht im Hintergrundankerbereich angezeigt.
4. Enthalten
Erweitern Sie das Bild auf seine maximale Größe, sodass seine Breite und Höhe vollständig in den Inhaltsbereich passen.
Das Obige ist eine spezifische Einführung in die proportionale Skalierungsanzeige von CSS-Bildern. Es hat einen bestimmten Referenzwert und kann als Referenz verwendet werden.
Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS die gleiche Skalierung der Bilder auf der Seite? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!