Wie erreicht man mit CSS die gleiche Skalierung der Bilder auf der Seite? (Beispiel)-CSS-Tutorial-php.cn

Wie erreicht man mit CSS die gleiche Skalierung der Bilder auf der Seite? (Beispiel)

藏色散人

Freigeben： 2018-08-13 17:11:08

Original

6573 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie erreicht man mit CSS die gleiche Skalierung der Bilder auf der Seite? (Beispiel)

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!