Heim  >  Artikel  >  Web-Frontend  >  Beispiele für die Verwendung von CSS zur Beibehaltung des Seitenverhältnisses von Seiteninhalten

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

高洛峰
高洛峰Original
2017-03-10 10:47:161581Durchsuche

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)
Beispiele für die Verwendung von CSS zur Beibehaltung des Seitenverhältnisses von Seiteninhalten

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:
Beispiele für die Verwendung von CSS zur Beibehaltung des Seitenverhältnisses von Seiteninhalten

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:
Beispiele für die Verwendung von CSS zur Beibehaltung des Seitenverhältnisses von Seiteninhalten

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
Beispiele für die Verwendung von CSS zur Beibehaltung des Seitenverhältnisses von Seiteninhalten

*------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!

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