cssで画像の比率を保ったままレスポンシブ対応させる

<div class="parent" style='width:100px;'>
 <div class="child w-100" style='padding-top:100%; position:relative'>
   <img src="" class="grandchild w-100 h-100" style='position:absolute; top:0; left:0;'> 
 </div>
</div>

一番親の要素としてwidthが明確に決まっている要素を用意する(％指定でも良い)

続いて子要素にpadding-top:100%;とposition:relative;とw-100をセットする（ここにh-100をつけるとスマホで画像を見たときだけ表示がバグるので絶対につけない）

最後に比率を保ちたい要素にw-100、h-100、posotion:absolute;、top:0;、left:0;をつける

仕組みとしては子要素のpadding-top:100%;がポイントで、paddingはその親要素のwidthを参照する仕組みになっているので、今回は親要素のwidthをそのまま持ってきている

また同じく子要素でw-100を指定しているので、この時点で子要素のpadding-topが親要素と全く同じheight、widthになる

この子要素のpadding-topに孫要素をpositionで合わせることにより、親要素の形が、そのまま子要素のpadding-top、孫要素に引き継がれる。