初級・中級者向け~ウェブ制作備忘録
レスポンシブが当たり前となった現在、アイテムも自動的に拡大・縮小させたい時があります。
画像なら横サイズ、あるいは縦サイズのどちらかを「%」指定して一方を「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 |