BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]適応的な幅と高さの矩形の16:9の例を達成するためのCSS

2022-02-02 04:22:28

先ほど、適応的な幅：高さが1：1の正方形を作る方法についてお話しました

https://www.jb51.net/css/753385.html

それでは、アダプティブな16:9の矩形を作るために必要なことを説明します。

まず最初に高さを計算します。横幅を100％とすると、高さはh=9/16=56.25%になります。

第二段階は、先ほどの set-padding-bottom メソッドを使って、矩形を実現します。 

<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		/* .wrap:wrap rectangle div, used to control the size of the rectangle */
		.wrap{
			width: 20%;
		}
		/* .box rectangular div, width is 100% of .wrap, this is mainly to facilitate the height calculation */
		.box{
			width: 100%;
                        /* prevent the rectangle from being propped up with extra height by the content inside */
			height: 0px;
			/* 16:9padding-bottom:56.25%, 4:3padding-bottom:75% */
			padding-bottom: 56.25%;
			position: relative;
			background: pink;
		}
		/* The content inside the rectangle , to set position: absolute, in order to set the content height 100% and the same as the rectangle */
		.box p{
			width: 100%;
			height: 100%;
			position: absolute;
			color: #666;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box">
				<p>&nbsp;&nbsp;This is a 16:9 rectangle</p>
			</div>
		</div>
	</body>

同様に、異なるスケールの矩形は、このように実装することができます。

以上で、16:9の幅に適応した矩形のCSSサンプルについての記事を終わります。CSS の幅適応型矩形については、過去の記事を検索するか、以下の記事を引き続きご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します