要素のアスペクト比（縦横比）を維持する方法

CSSにおいて、画面いっぱいの中の要素のアスペクト比（縦横比）を維持する方法を書き留めておきます。
単純に横幅も縦幅もpxで指定するのではなく、デバイスの変化に対応できるものです。
方法はとても簡単です。

CSSでの記述の仕方

例えば横幅400px、縦幅300pxのアスペクト比を維持したい場合は以下の通り。

section {
  width: 100vw;
  height: calc(100vw * 0.75);
}

解説

まずvwとは、viewport widthの略で、デバイスの横幅に対するパーセンテージを指定できます。

その為、横幅をまず基準として考え、横幅に対する縦幅の割合を掛けてやります。

横幅 * （　アスペクト割合　＝　縦幅 / 横幅　）

つまりデバイスの中で60％ほどの横幅にしたい場合は、上記100vwの箇所を60vwとすれば良いわけです。

%でも良いのでは？と思うかもしれませんが、パーセンテージは親要素に対するものですからわけが違ってきます。
さらに縦幅の指定も、横ではなく親要素の縦に対して何％なのかを出そうとするので、アスペクト比は維持されません。

こちらでさらに詳しく説明されておりました。 参考にぜひどうぞ。

CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO

一般的に CSS で要素の幅や高さを指定する際は px や % といった単位を使いますが、最近のブラウザにおいてはこの他…

https://dev.classmethod.jp/articles/css-length-viewport/

画像の場合

既知の方は多いと思われますが以下の通りです。 画像は縦横の情報を持っているのでしょう、これで十分です。

img {
    width : 100%;
	height : auto;
}

画像の親の領域を画像と同じように変化させたい場合は、ぜひvwとその計算式をご使用ください。