画像の縦横比を維持したままレスポンシブ化するように、div のようなブロック要素の縦横比を維持するCSSをFLOCSS で書く

何ができるか?

div のようなブロック要素の縦横比を維持するCSSをFLOCSS で書ける。

普通にCSS を書くなら、参考にしたこちらの記事の方がわかりやすい。ありがとうございます。
CSSだけでアスペクト比を固定するテク
https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

背景

レスポンシブデザインで、複数カラムの一部を画像ではなくテキストの入るブロック要素にして、PC サイズのみカラムの縦横比を維持しようとした。

縦横比を維持したテキストボックスのイメージ

ソース

あとは、維持したい縦横比を計算して、.p-boxratio__XX のクラスを作成し、HTML を作る。