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。
とりあえずコピペで使いまわせるので覚えるまでもないですが、原理を理解すると頭の中でパッとコードが浮かぶようになるので何でこうなるのかなぁ～を知るとよいですよ。