Heim > Artikel > Web-Frontend > 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:086516Durchsuche

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:

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!

css auto Length background

Stellungnahme：

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

Vorheriger Artikel：Wie überschreibe ich den ursprünglichen Stil mit dem CSS-Stil? Verwenden Sie die Vue-Anpassung, um den Elementui-Stil zu überschreibenNächster Artikel：Wie überschreibe ich den ursprünglichen Stil mit dem CSS-Stil? Verwenden Sie die Vue-Anpassung, um den Elementui-Stil zu überschreiben

In Verbindung stehende Artikel

Mehr sehen