Heim > Artikel > Web-Frontend > So stellen Sie sicher, dass Breite und Höhe des Bildes auf der Seite immer ein Verhältnis von 16:9 beibehalten

So stellen Sie sicher, dass Breite und Höhe des Bildes auf der Seite immer ein Verhältnis von 16:9 beibehalten

不言nach vorne: 2018-10-23 16:25:246029Durchsuche

Der Inhalt dieses Artikels handelt davon, wie man die Breite und Höhe des Bildes auf der Seite im Verhältnis 16:9 einhält. Ich hoffe, dass dies der Fall ist hilfreich für Sie.

Ziel:
Auf die Notwendigkeit gestoßen, Bilder auf der Seite zu belassen, unabhängig davon, wie sich die Breite ändert. Die Breite und Höhe behalten das 16:9-Verhältnis bei.

Implementierung:

Methode 1: Dies ist auch eine klassischere Methode, die mithilfe von padding-bottom implementiert wird.

<!DOCTYPE html>
<html>
<head>
    <title>固定宽高比16:9</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
         }
        .wrap{
            width:100%;
        }
        /* 16:9宽高比，则设padding-bottom:56.25% */
        /* height: 0px,防止矩形被里面的内容撑出多余的高度*/
        .box{
            width: 100vw; 
            height: 0px; 
            position: relative;
            padding-bottom: 56.25%;
            background: pink;
        }
        /* 如果需要在div里面设置内容*/
        /* 需要设置position：absolute，才能设置内容高度100%和矩形一样 */
        /*.box p{
            width: 100%;
            height: 100%;
            position: absolute;
        }*/
    </style>
</head>
<body>
<div class="wrap">
    <div class="box">
        <p>这是一个16：9的矩形</p>
    </div>
</div>
</body>
</html>

Methode 2: Verwenden Sie vmin, um dies zu erreichen.

<!DOCTYPE html>
<html>
<head>
    <title>固定宽高比16:9</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
         }
        .wrap{
            width:100%;
        }
        /*vmin：相对于可视窗口的宽度或高度中较小的那个，被均分为100单位的vmin*/
        /*例：当宽度是300，高度是600，那么50vmin则是相对于宽度的50%*/
        .box{
            height: 56.25vmin;
            background: pink;
        }

    </style>
</head>
<body>
<div class="wrap">
    <div class="box">
        <p>这是一个16：9的矩形</p>
    </div>
</div>
</body>
</html>

Hinweis: Wenn die Bildschirmbreite größer und die Höhe kleiner ist, kann vmax verwendet werden. Wenn Sie nach Belieben wechseln müssen, können Sie dies über js steuern.

Zusammenfassung:
Beide Methoden haben ihre eigenen Vor- und Nachteile: Sie ist gut kompatibel, der Code ist relativ lang und schwieriger zu verstehen. Methode 2: Der Code ist prägnant und nach Klärung der Definition leicht zu verstehen, aber die Kompatibilität ist relativ schlecht. Aber was ist mit der Kompatibilität? Wovor haben Sie Angst?

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass Breite und Höhe des Bildes auf der Seite immer ein Verhältnis von 16:9 beibehalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JS padding

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie CSS-Theme über den Quellcode eine Stildatei generiert, die mehrere Sätze von Skin-Konfigurationen enthältNächster Artikel：Wie CSS-Theme über den Quellcode eine Stildatei generiert, die mehrere Sätze von Skin-Konfigurationen enthält

In Verbindung stehende Artikel

Mehr sehen