Ryuji 
縦横比（アスペクト比）の設定について
ブラウザ幅を変更しても、画像や動画の縦横比を変えたくないという時ありますよね。
そんな時の設定方法についてまとめます。
方法は２つ。
①padding-topを使う
②aspect-ratioを使う
padding-topを使う
以下に、僕が実案件で触れているサンプルコード（一部改変）について記載します。
また前提として、ここで使用する画像はPS用とSP用に分けています。
・PC用画像サイズ 幅1925px × 縦735px
・SP用画像サイズ 幅960px × 縦1050px
<div class="mv-area">
<!--PC版-->
<div class="PC" style="position:relative; width:100%; padding-top: 38.1818%;">
<img src="../images/mv_pc.jpg" style="position:absolute;top:0;left:0;width:100%;height:auto;">
</div>
<!--SP版-->
<div class="SP" style="position:relative; width:100%; padding-top: 109.375%;">
<img src="../images/mv_sp.jpg" style="position:absolute;top:0;left:0;width:100%;height:auto;">
</div>
</div>上記のように記述をすれば、縦横比を一定に保ったまま画像や動画を表示することができます。
ここでは、PC版とSP版で表示する画像を分けており、PCクラスが付いたものはPCのみで表示、SPクラスが付いたものはSPのみで表示されるようになっています。（この方法は別の機会にまとめます）
<img>を囲う<div>で指定しているpadding-topの値は、設置したい画像の【縦の長さ÷横の長さ×100%】の値です。
ここでは、
PC版：735px÷1925px×100%=38.1818….%
SP版：1050px÷960px×100%=109.375%
となっています。SP版は縦の方が幅より大きいですね。
この値は設置したい画像の大きさに合わせて適宜変更してください。
aspect-ratioを使う
以下に、上記padding-topで指定していたものを、aspect-ratioに書き換えたものを記載します。
<div class="mv-area">
<!--PC版-->
<div class="PC" style="aspect-ratio:1925/735;">
<img src="../images/mv_pc.jpg" style="width:100%;height:auto;">
</div>
<!--SP版-->
<div class="SP" style="aspect-ratio:960/1050;">
<img src="../images/mv_sp.jpg" style="width:100%;height:auto;">
</div>
</div>aspect-ratio:幅/縦 と指定するだけで、縦横比を一定に保つことができるようになります。
positionの指定がなくなり、かなりすっきりしましたね。
ちなみに注意点として、aspect-ratio: 縦 / 幅 と記載しがちなので、気を付けてくださいね。
