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; 🎜>
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>
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!