要素の縦横のアスペクト比を維持しながら % でリサイズ

導入

長年求め続けていた「横幅と縦幅のデフォルトを指定すると横幅のリサイズで縦幅もいい感じに変わる」方法を発見した。 まだ、これで何か作ってみたわけじゃないので落とし穴があるかもしれないが、 個人的にかなりヒットなテクニックなのでブログにメモっておく。

概要

要件が以下の場合に使えると思う。

  • 横幅に応じて、要素をリサイズしたい。
  • その際、縦幅も「最初指定したアスペクト比を維持】して欲しい

ありがちなユースケースとしては、画像を並べて表示し、 横幅に関しては画面一杯表示したい場合などがあると思う。

見つけた場所

まだコードの意味が把握できないので、コードが書いてあるサイトへのポインタだけ載せる。

http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css

終わりに

very useful, thank you!!!