【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
ウインドウサイズに合わせて画像サイズも変化
ウインドウサイズに合わせて画像サイズも変化
小さくなりすぎると、文字が読めない
小さくなりすぎると、文字が読めない
小さくなりすぎると、文字が読めない
小さくなりすぎると、文字が読めない
画像サイズがウインドウサイズに自動追随
画像サイズがウインドウサイズに自動追随
ウインドウサイズ(画面幅)に合わせて画像サイズも変化する
ウインドウサイズ(画面幅)に合わせて画像サイズも変化する
画像サイズをウインドウ幅に連動させると、小さくなりすぎた場合に文字が読めない問題がある
画像サイズをウインドウ幅に連動させると、小さくなりすぎた場合に文字が読めない問題がある
親要素の横幅が画面幅の75%に制限されていても、画像の横幅に「90vw」が指定されていると親要素をはみ出して表示される
親要素の横幅が画面幅の75%に制限されていても、画像の横幅に「90vw」が指定されていると親要素をはみ出して表示される
画像の横幅が常に画面幅の75%で表示される例
画像の横幅が常に画面幅の75%で表示される例
画面の横幅サイズ600pxを基準にして大画像と小画像が自動で切り替わる例
画面の横幅サイズ600pxを基準にして大画像と小画像が自動で切り替わる例
Chromeで表示確認する場合は、デベロッパーツールでキャッシュをOFFにしておく必要がある
Chromeで表示確認する場合は、デベロッパーツールでキャッシュをOFFにしておく必要がある
この写真の記事を読む
ウインドウサイズに合わせて画像サイズも変化
小さくなりすぎると、文字が読めない
小さくなりすぎると、文字が読めない
画像サイズがウインドウサイズに自動追随
ウインドウサイズ(画面幅)に合わせて画像サイズも変化する
画像サイズをウインドウ幅に連動させると、小さくなりすぎた場合に文字が読めない問題がある
親要素の横幅が画面幅の75%に制限されていても、画像の横幅に「90vw」が指定されていると親要素をはみ出して表示される
画像の横幅が常に画面幅の75%で表示される例
画面の横幅サイズ600pxを基準にして大画像と小画像が自動で切り替わる例
Chromeで表示確認する場合は、デベロッパーツールでキャッシュをOFFにしておく必要がある
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます