【アスペクト比を固定】縦可変の図形をつくる方法

こんにちは。

今日は縦可変の図形をつくる方法について書いていきます。

最近教えてもらったのですが、個人的にかなりトリッキーな技術です。
こんな方法があるのか〜〜！と理解するのに少し時間がかかりました(°_°)

ではさっそく見ていきましょう。

アスペクト比とは？

まず、「アスペクト比」という言葉の説明を軽くします！

私も最近知った言葉なのですが、簡単にいうと画像などの縦横比のことです。

例えばレスポンシブ対応するときをイメージしてもらうと、画面幅が縮まると同時に配置している画像は縦横比を保ったまま縮んでいきますよね？

それがアスペクト比を固定するということです。
画像だと比較的簡単にできます。

が、あまりないと思いますが中に何も入っていない箱のアスペクト比を固定したいとなるとどうでしょう？

実は最近デザイン通りに実装するために使いました！

では次にこの方法を実践するにあたって知っておかないといけない知識について書きます。

padding-topを％で指定すると横幅基準の高さになる

これ、普通はpadding-top:10%;なんて指定すると要素の高さに対する割合だと思いませんか？？

ですが横に対する割合になるのが規則なのだとか(°_°)

なので例えば 横650px、縦400pxのアスペクト比固定の図形を作りたいなら下記のように指定します。

 padding-top: 400 / 650 * 100%;

答えは0.615（以下省略）になるので62%くらいでしょうか。

なのでアスペクト比はおよそ62%になります。

この計算式も上のように書くと自動で計算してくれるので楽です！

ちょっと時間が足りなくて中途半端になってしまいましたが、より詳しく説明している参考サイトを貼っておきます。

[css]アスペクト比を固定して可変させる方法 ~よく見る75%ってなに!?~｜blog（スワブロ） | スワローインキュベート

特許技術を活用した「ヒューマンセンシングSDKの開発」と「ソリューション提供」、「アプリ開発」などを事業としているスワローインキュベートの企業ブログです。最新の製品情報や、開発中の技術など、テクノロジー関連ブログのほか、スワローの社内行事や、社員によるブログ、求人情報なども公開しています。

swallow-incubate.com

では今日はここまで〜〜