縦横比を維持して拡大・縮小する最短CSS

縦横比を維持して拡大・縮小する最短CSS

レスポンシブが当たり前となった現在、アイテムも自動的に拡大・縮小させたい時があります。

画像なら横サイズ、あるいは縦サイズのどちらかを「%」指定して一方を「auto」指定すれば、自動サイズ調整できますが、divタグなどはどうしましょうか?

YouTubeを始め、動画や画像サイズは「縦:横=9:16」や「縦:横=3:4」など、バナーでは「縦:横=250:300」「縦:横=280:336」「縦:横=90:728」など、既定のサイズがあります。

それに合わせて、アイテムのサイズを合わせたい場合のコードですが、基本的にコードは短ければ短いほど嬉しいですので、これ以上削れない…最短コードをどうぞ。

用途に合わせて、CSSの赤文字箇所を縦横比にすれば、任意の比率でボックスができます。

<style>
div{
   height:0;
   padding:0 0 calc(9 / 16 * 100%);
}
</style>
<div>縦横比を維持して自動調整</div>
HTML&CSS
2019.07.06 07:16
2019.07.12 07:58

Related entry

Pickup entry