Beispiel für die Implementierung eines 16:9-Rechtecks ​​mit adaptiver Breite und Höhe mithilfe von CSS

<Stil>
		*{
			Rand: 0px;
			Polsterung: 0px;
		}
		/* .wrap: Das Div, das das Rechteck umschließt, wird verwendet, um die Größe des Rechtecks ​​zu steuern*/
		.wickeln{
			Breite: 20 %;
		}
		/* .box rechteckiges div, die Breite beträgt 100 % von .wrap, dies dient hauptsächlich dazu, die Berechnung der Höhe zu erleichtern*/
		.Kasten{
			Breite: 100 %;
                        /*Verhindern Sie, dass das Rechteck durch den Inhalt zu hoch gedehnt wird*/
			Höhe: 0px;
			/* 16:9 Polsterung unten: 56,25 %, 4:3 Polsterung unten: 75 % */
			Polsterung unten: 56,25 %;
			Position: relativ;
			Hintergrund: rosa;
		}
		/* Für den Inhalt innerhalb des Rechtecks ​​müssen Sie die Position „absolute“ festlegen, um die Inhaltshöhe auf 100 % einzustellen, also auf die Höhe des Rechtecks*/
		.box p{
			Breite: 100 %;
			Höhe: 100%;
			Position: absolut;
			Farbe: #666;
		}
	</Stil>
	<Text>
		<div Klasse="wrap">
			<div Klasse="Box">
				<p>&nbsp;&nbsp;Dies ist ein 16:9-Rechteck</p>
			</div>
		</div>
	</body>