CSSでコンテンツの縦横比を固定しレスポンシブに対応させる

HTML/CSS
CSSのみで、divやimg、iframeなどを縦横比率を固定する方法です。
imgの縦横比を固定しレスポンシブに対応させる
img要素は縦横比を固定するのが簡単ですね。
※ クラス名のasはアスペクト比の「aspect」の頭です。適宜調整ください。
/* ◆ サイト全体のimgを縦横固定の場合 */ <img src="URL" /> /* ◆ img にクラスを付与する場合 */ <img src="URL" class="as-img" /> /* ◆ imgの親要素にクラスを付与する場合 */ <div class="as-img"><img src="URL" class="as-img" /></div>
/* ◆ サイト全体のimgを縦横固定の場合 */ img { width: 100%; height: auto; } /* ◆ img にクラスを付与する場合 */ img.as-img { width: 100%; height: auto; } /* ◆ imgの親要素にクラスを付与する場合 */ .as-img img { width: 100%; height: auto; }
divなどの要素を縦横比固定にし、レスポンシブに対応させる
divなどのブロック要素の場合は、外枠と内枠で作る必要があります。
※ クラス名のasはアスペクト比の「aspect」の頭です。適宜調整ください。
.as-outer { position: relative; width: 100%; } .as-outer:before { content:""; display: block; padding-top: 60%; /* 3:5の縦横比の場合3/5=0.6×100で60% */ } .as-inner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
outerにrelative、innerにabsolute。そしてouterに:beforeで縦の横に対する比率を指定してやるという流れを覚えておけばOK。
iframeの縦横比固定にし、レスポンシブに対応させる
googlemapやyoutubeの動画の埋込時に必要になる項目ですね。
※ クラス名のasはアスペクト比の「aspect」の頭です。適宜調整ください。
.map { position: relative; padding-bottom: 28%; /* ここで高さの比率を調整 */ height: 0; overflow: hidden; } .map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
iframeも基本的にはdiv要素などと同じでouterにrelative、innerにabsolute。
とりあえずコピペで使いまわせるので覚えるまでもないですが、原理を理解すると頭の中でパッとコードが浮かぶようになるので何でこうなるのかなぁ~を知るとよいですよ。
コメント ( 0 )
トラックバックは利用できません。
この記事へのコメントはありません。