Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS-Code zur Implementierung eines proportionalen Layouts von Breite zu Höhe

小云云
Freigeben: 2018-03-14 09:38:27
Original
1493 Leute haben es durchsucht

Die Breite beträgt das Doppelte der Höhe (kongruente Skalierung)Implementierungsidee: Basierend auf dem übergeordneten Element, untergeordnete Breite: 100 % (d. h. 100 % der übergeordneten Breite), Polsterung oben: 50 % (d. h. 50 % der übergeordneten Breite. Wenn der Abstand gemäß der CSS-Spezifikation als Prozentsatz ausgedrückt wird, entspricht der Abstand: 100 % der Breite des übergeordneten Elements); >Warum nicht einfach „Breite: 50 %; Höhe: 50 %;?

Dann beträgt die Höhe 50 % der Höhe des übergeordneten Elements (es sei denn, Breite und Höhe des übergeordneten Elements sind gleich);

Originaltitel:

Das rote Blockebenenelement ist vertikal in der Mitte des Bildschirms zentriert; 🎜>
    Das rote Element auf Blockebene ist jeweils 20 Pixel vom linken und rechten Rand des Bildschirms entfernt.
  1. Der Inhalt innerhalb des roten Elements auf Blockebene ist horizontal zentriert vertikal;
  2. Die Höhe des roten Blockebenenelements ist immer die gleiche wie die des roten Blockebenenelements 50 % der Breite.
  3. Das Verhältnis von Breite zu Höhe des roten Teils beträgt 2:1

Quellcode:

Verwandte Empfehlungen:


PHP skaliert Bildklassen proportional zur maximalen Breite und Höhe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽高比例固定</title>
    <style>

        .father{
            overflow: hidden;
            position: absolute;
            left: 10px;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #0c8ac5;
        }

        .son{
            width: 100%;
            padding-top: 50%;
            background-color: #c03035;

        }
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            color: #D8D8D8;
        }

        img{
            float: left;
            margin-right: 10px;
            border: 2px solid #fdf6e3;
        }

    </style>
</head>
<body>
    <section class="father">
        <p class="son"><span><img src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武当派弟子(现已离开武当),八奇技之一风后奇门的继承人,靠占卜悟出天道,却又作出甘于投身乱世的选择。外表一副老好人的温良相,谦谦有礼如温吞水般,做事也经常是一副没精打采,貌似没睡醒的样子。优哉游哉还脾气软,代表举动经常是歉意笑着作出让步。似乎对什么都无所谓,一副悠然道人之姿,但是在涉及到家人安危时毫不含糊,甚至为此做出过有失冷静的举动。不小心爆粗都会拜祖道歉的出家人,实力在后生一辈中甚至称得上头筹,暂时只有一次完全没预料到地阴沟里翻船。</span></p>
    </section>
</body>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCSS-Code zur Implementierung eines proportionalen Layouts von Breite zu Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!