サイトに画像を表示した時に、画像サイズが大きかったりするとウインドウからはみ出て表示されてしまいます。

最近流行りのレスポンシブデザイン(1つのサイトが大きな画面でも小さな画面でもキレイに配置されるのでスマホ用に作りなおさなくても良いデザイン)でも、ウインドウ幅に合わせて画像が拡大縮小する手法はよく用いられています。

今回は画像をウインドウ幅に合わせて拡大、縮小する方法をご紹介します。

通常のimgタグで画像を貼り付けた場合

ウインドウ幅が十分ある場合は画像は全て表示されています。

css_scale1

ウインドウ幅を狭くすると、画像がはみ出てしまっています。

css_scale2

スタイルシートにたった2行書くだけで解決

この画像がはみ出てしまうのを解決するためにはスタイルシートを使います。

スタイルシートに以下のように追加してください。これで縦横比を保持したまま、画像がウインドウ幅に合わせて自動的に拡大縮小します。拡大に関しては元の画像サイズ以上の大きさにはならないのでウインドウ幅いっぱいに画像が拡大表示されてしまうこともありません。

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

ウインドウ幅を狭くしてもこのとおり。

css_scale3

ちなみにウインドウ幅いっぱいに画像を表示したい場合は、max-widthのmax-を外して、このように書けば縦横比を保持したままウインドウ幅いっぱいに画像が表示されます。

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

レスポンシブデザインに限らず、様々な環境で閲覧されるウェブサイトの画像表示には欠かせない手法ですね。

ちなみに画像はアイスケットの動画作成のチラシです。市内すべての幼稚園・保育園に配布するの大変でした。

本日は以上です。