読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【レスポンシブ】親要素がrelativeで子要素のabsoluteの横幅と高さの比率を保つ

備忘録 スマホ対応 レスポンシブ

親要素のcssを以下のように設定

#box{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 75% 0 0;
}

子要素のcssを以下のように設定

#box .inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(丸い画像の参照先) right bottom no-repeat #b40d0d;
}

html記述

<div id="box">
<div class="inner">
<p>4:3</p>
</div>
</div>

【参考URL】
http://tsudoi.org/weblog/?p=2949