Beispiele für die Verwendung von CSS zur Beibehaltung des Seitenverhältnisses von Seiteninhalten

In diesem Artikel wird erklärt, wie man CSS verwendet, um das Seitenverhältnis des Seiteninhalts beizubehalten. Der Autor gibt Beispiele für verschiedene Methoden wie Pseudoelemente und VW-Einheiten.

Beschreibung der Anforderungen : Mobiles Endgerät Erzielen Sie einen Halbkreis auf der Seite. (Ähnliches Problem, Implementierung eines quadratischen 4x4-Rasters)

Um das Problem zu vereinfachen, können wir es als Implementierung eines Blocks mit einem Höhen- und Breitenverhältnis von 1:2 verstehen.

Probleme müssen gelöst werden:

1. Höhe und Breite stehen in einem bestimmten Verhältnis.

2. Die Höhe und Breite des Außenbehälters sind ungewiss.

3. Versuchen Sie, stattdessen keine Bilder und Skripte zu verwenden.

4. Kompatibel mit mobilen Endgeräten.

HTML schreiben

<p class = "semicircle"></p>

Denken Sie eins, verwenden Sie Höhe: 100 %,

body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
    width: 100%;   
    height: 100%;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}

Es liegt ein Problem vor. Der Prozentsatz der Höhe wird basierend auf dem übergeordneten Container berechnet, nicht auf dem aktuellen Container, der unsere Anforderungen überhaupt nicht erfüllen kann. Der Effekt ist wie folgt:

Der Höhenprozentsatz des übergeordneten Containerkörpers hängt von der Höhe ab, die sein untergeordneter Container ausfüllt. Auch wenn die Körperhöhe auf 100 % eingestellt ist, ist die tatsächliche Die vom untergeordneten Container ausgefüllte Höhe, d übergeordneter Container in Prozent.

Denken Sie 2: Setzen Sie padding-top oder padding-bottom auf 100 %
Der Prozentsatz wird in Bezug auf die Breite des enthaltenden Blocks der generierten Box berechnet [...] ( Quelle: w3.org, Hervorhebung durch mich)

Die Berechnung der prozentualen Breite bezieht sich auf die Breite des enthaltenden Blocks der generierten Box. Die Prozentsätze von padding-top und padding-bottom werden basierend auf der Breite des übergeordneten Containers berechnet, nicht auf der Höhe. Vergleichstabelle zur Implementierung anderer Verhältnisse

aspect ratio	padding-bottom value
16:9	56.25%
4:3	75%
3:2	66.66%
8:5	62.5%

body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
    width: 100%;   
    height: 0;   

    padding-bottom: 100%;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}

Denken Sie an 3: Verwenden Sie die VW-Einheit
Verwenden Sie die vw-Einheit, um die Höhe und Breite des Elements festzulegen. Die Größe des VM wird durch die Breite des Ansichtsfensters festgelegt, sodass diese Methode verwendet werden kann, um die Anzeige des Containers in einem bestimmten Verhältnis zu halten. Eine Einheit vw entspricht einem Prozent der Breite des Ansichtsfensters, d. h. 100 vw entspricht 100 % der Breite des Ansichtsfensters.

body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
     width: 100vw;   
      height:100vw;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}

Vergleichstabelle

aspect ratio	multiply width by
1:1	1
1:3	3
4:3	0.75
16:9	0.5625

Denken 4, Verwendung von Pseudoelementen und Inline-Block-Layout

body {   
    width: 100%;   
    font-size: 0;   
    text-align: center;   
    background: lightblue;   
}   
.semicircle {   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}   

.semicircle:before {   
    content:"";   
    display: inline-block;   
    padding-bottom: 100%;   
}

Obwohl der Code etwas kompliziert ist, ist er sehr flexibel und kann ähnlichere Effekte erzielen.

Wenn die Anforderung geändert wird, um einen Halbkreis zu implementieren, der 80 % der Breite des Bildschirms umfasst, müssen wir nur das Attribut width:80 % zu .semicircle hinzufügen und auch den Container zentrieren.

Das Prinzip dieser Methode ist sehr klar:

Beziehen Sie sich auf Gedanke 1. Wenn die Höhe des Außenbehälters nicht um 100 % erweitert werden kann, können Sie ein Element mit derselben Höhe und einfügen Breite durch ein Pseudoelement und Der Container wird auf eine Höhe von eins zu eins gestreckt. Beachten Sie, dass diese Methode zum Implementieren eines Halbkreises tatsächlich einen Container mit einem Breiten-Höhen-Verhältnis von eins zu eins erfordert, was bedeutet, dass sie doppelt so viel Platz einnimmt wie die obige Methode.

Einstellung: vor der Elementgrenze, Analyseprinzip:

Denken Sie fünf, verwenden Sie Bilder, kompatibel mit Low-End-Mobilgeräten.

semicircler img {   
  width: 100%;   
  background-repeat: no-repeat;   
  background-size: 100% 100%;   
  background-image: url(../img/autoresized-picture.jpg);   
}

Durch die Verwendung von Skripten ist CSS prägnanter und klarer, mit klaren Zielen.

p.style.height=p.offsetWidth+"px";

Zur Umsetzung eines 2*2 quadratischen Rasters

*------main code-------*/   
        body {   
          width: 100%;   
          margin:0;   
          text-align: center;   
        }   
        p{   
          display: inline-block;   
          width: 50%;   
          background: lightblue;   
          font-size: 12px;   
          position: relative;   
          vertical-align: middle;   
        }   

        p:before {   
            content:"";   
            display: inline-block;   
            padding-bottom: 100%;   
            vertical-align: middle;   

        }   

        /*------other code-------*/
        p:nth-child(2),p:nth-child(3){   
            background: pink;   
        }   


        span {   
            display: inline-block;   
            vertical-align: middle;   
            font-size: 6em;   
            color: #fff;   
        }

 

Das obige ist der detaillierte Inhalt vonBeispiele für die Verwendung von CSS zur Beibehaltung des Seitenverhältnisses von Seiteninhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!