CSSプロパティの「aspect-ratio」を使うと、要素のアスペクト比を指定することができます。
IE11では使えませんが、モダンブラウザであれば基本的に対応しています。
レスポンシブ対応の際に便利。aspect-ratio: 4 / 3;
上記のように指定すると、その要素のアスペクト比が4：3になります。
これまでもwidthに対して高さをpaddingで％指定することで同じようなことができましたが、それがよりストレートに指定できることになります。
また、paddingを使う方法だと高さから幅を決めることができませんが、aspect-ratioであれば普通にheightを指定すればaspect-ratioの比率に沿って幅が決まります。
コメントする