[CSS]これなら簡単！レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy

デスクトップやスマホなど、異なるスクリーンのサイズでも、黄金比や白銀比などのアスペクト比を維持したまま画像や要素を実装するスタイルシートを生成する便利なオンラインツールを紹介します。

このかわいいデザインに、癒やされますｗ

RatioBuddy
by Damn Fine

ツールの使い方は、簡単です。
デフォルトは、1:1のアスペクト比で実装されています。

アスペクト比に、デザインでよく使われる「黄金比」を指定してみます。
参考: 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ

黄金比を適用
小数点は指定できないので、16:10で。

アスペクト比は、ロックすることができます。
アスペクト比の数値は、整数の公約数で表示されるようです。

アスペクト比のロック

ちょっと変えるだけで、顔が変化するのも、楽しいですｗ

アスペクト比をロックし、サイズを変更すると、比率を維持した値が反映されます。

アスペクト比の計算

黄金比を維持したスタイルシートは、下記のように生成されます。