【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.
画像や動画の横幅が100%などで可変する時、高さも比率を合わせて可変してほしい場合のCSSをメモしておきます。
方法はめちゃくちゃ簡単です➡️ 『縦幅÷横幅の値を%にして指定する』
例えば、横1920px縦1080pxの画像を設置する時は、1080÷1920=0.5625 なのでCSSは以下になります。
1 2 3 4 5 6 7 8 9 |
.img { width:100%; position: relative; } .img:before { content: ""; display: block; padding-top: 56.25%; } |
Web Trends Lab.編集部
KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。
INDEX
PICK UP
KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。