AndroidやiOS、PCやネットのちょっとした情報めも

CSSでウインドウサイズに合わせて画像を拡大縮小する方法

公開日 2015年7月30日更新日 2017年3月18日カテゴリー プログラム

レスポンシブWebデザインに対応させたホームページを作成するのに必要となってくる画像の拡大縮小。

PC用で普通にimgタグで作成するとスマホのような画面サイズが小さい場合、はみ出してしまうので、

スタイルシートに以下を追記する。

img {
max-width: 100%;
height: auto;
}

ウインドウ幅いっぱいに画像を表示したい場合は

img {
max-width: 100%;
height: auto;
}

タグ:
こちらの記事もオススメです
« 前の記事
次の記事 »

TOPへ
戻る