マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

包括ブロックが割合（％）指定されているとき、普通のやり方だと横幅と縦幅の比率を保つのが難しいです。
決まった比率でサムネイル表示させたい時など、この問題で悩む人もいるのではないでしょうか。

結論から言うと、画像の包含ブロックに対し、「height」ではなく「padding-top」で高さを与えることで、画像に一定の比率を与えることが可能です。
サンプルは以下。

See the Pen
qwBQeV by emi torazawa (@mr_emi)
on CodePen.

「padding-top」は、その親のwidthを参照することを利用し、
例えば16:9の比率にしたければ、「親のwidth幅（%）*0.56」すればいいというわけです。
あとは、画像のサイズが表示範囲とピッタリでないことを考慮して、
overflow:hidden;やobject-fit:cover;など使えば、比率を保ったままきれいに表示させることができます。

レスポンシブのサイトを作ることが当たり前になり、
中にはPCのレイアウトからパーセントコーディングを採用するケースもあると思います。
そういったときには割と必須になるテクニックかもしれませんね。

以上、虎澤でした。