縦横比を維持して拡大・縮小する最短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

• BACK
• NEXT