Roroa.

こんにちはkazukiです。
先日アスペクト比でスタイルをあてなければならないことがあり、その時あれやこれやと調べたのでメモしたいと思います。

アスペクト比のメディアクエリ記述

アスペクト比でスタイルをあてる方法は以下の書き方になります。

コード

アスペクト比 16:9以上に適用

@media screen and (min-aspect-ratio: 16/9) {
	// ここにスタイルを記述
}

アスペクト比 16:9以下に適用

@media screen and (max-aspect-ratio: 16/9) {
	// ここにスタイルを記述
}

説明

メディアクエリをaspect-ratioにすることで使用することができます。
16:9となっているところは、横：縦になります。

アスペクト比をもとめたい時は、こちらのサイトを使ったりしています。
アスペクト比計算ツール

また、画像の横：縦サイズをそのまま入れたりすることもあります。（1200:630みたいな感じで）
これは後任の方が、コードをみた時「あ〜この画像（もしくはvideo）サイズを基準にしてるのね〜」と、パッと見である程度わかるようにしておこうかな〜という気持ちからです。（ちゃんとアスペクト比で書きなさいよ！と思われていたらごめんなさい。。。）

なぜ今回必要になったの？

それは、動画をフルスクリーンでPC / スマホで表示させたいというときに必要になりました。

以前書いた「【css】videoタグの動画をcssでフルスクリーン表示させる」の方法で作っていたサイトにフルスクリーンを実装すると、PCはある良い感じなのですが、スマホの時がかなり大きくなり一部しか見えない現象が起きました。

これは記事の「最後にちょっと注意」にも記載しているのですが、最小値を100%にしているため元のサイズが大きいと一部しか見えなくなってしまうためです。
作っていたサイトで使われていたサイズは横1400pxのため、スマホで見ると真ん中の375px分くらいしか見えない状態だったのです。。。

余談：アスペクト比からサイズのもとめ方

横のサイズとアスペクト比だけわかる状態がありまして、その時計算したのでこれもメモしておきます。

横：1200px アスペクト比16:9

1200÷16×9=縦です。

最大公約数を比率でかけるとわかるようです。
たぶんまた忘れそうなので！笑