縦横比を固定したままiframeや画像を表示する

html5/css3, responsive
Posted : 2018.4.25
Update : 2018.4.25

margin と　padding　を　％で表すときは、親要素の横幅が基準となります。
上下のmargin/paddingも、親要素の【横幅】が基準です。
レスポンシブコーディング時は、これを便利にいろいろなところで活用しています。

PC表示時は↑のように表示されているiframeを、レスポンシブ対応させるときの表記。

サンプルソース

html

<div id="container">
	<div id="box">
		<iframe src="★★"></iframe>
	</div>
</div>

css

*{
	box-sizing: border-box;
}
#container{
	width:1000px;
	max-width:100%;
	margin:0 auto;
}
#box{
	width:64%;
	margin:0 auto;
	padding-top:48%;
	position:relative;
	overflow:hidden;
}
#box iframe{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	}

コード補足

％数値をわかりやすくするために、コンテンツ幅を1000pxにしていますが、
#boxのpadding-topの計算の仕方は
親要素の横幅1000px、高さ480pxから算出します。
（ 480 ÷ 1000 ×　100 ）％

calcを使うと下記のようになります。

padding-top:calc(480 / 1000 * 100%);

画像の場合は iframeをimgにするだけです。

BACK
NEXT