CSS を使用して適応型の幅と高さを持つ 16:9 の長方形を実装する例

<スタイル>
		*{
			マージン: 0px;
			パディング: 0px;
		}
		/* .wrap: 四角形を囲む div は四角形のサイズを制御するために使用されます*/
		。包む{
			幅: 20%;
		}
		/* .box 長方形 div、幅は .wrap の 100% です。これは主に高さの計算を容易にするためです */
		。箱{
			幅: 100%;
                        /* 四角形が内部のコンテンツによって過度に高くなるのを防ぎます */
			高さ: 0px;
			/* 16:9 下部パディング: 56.25%、4:3 下部パディング: 75% */
			パディング下部: 56.25%;
			位置: 相対的;
			背景: ピンク;
		}
		/* 四角形内のコンテンツについては、コンテンツの高さを四角形と同じ 100% に設定するために、position: absolute を設定する必要があります */
		.box p{
			幅: 100%;
			高さ: 100%;
			位置: 絶対;
			色: #666;
		}
	</スタイル>
	<本文>
		<div class="wrap">
			<div class="box">
				<p>&nbsp;&nbsp;これは 16:9 の長方形です</p>
			</div>
		</div>
	</本文>