レスポンシブで要素の比率を保持する

画面サイズを変更した際に、要素のアスペクト比を保持する方法をメモ。

サンプルコード

4:3の比率でリサイズに対応してみます。

HTML

<div class="aspect">
	<div class="aspect-box"></div>
</div>

CSS

.aspect {
	position: relative;
	width: 100%;
	padding-top: 75%; /* 4:3の場合 3 / 4 * 100 */
}
.aspect-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: red;
}

比率に応じて.aspectのpadding-topの値を変更します。
アスペクト比を保持するデモページ
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31