【横幅を合わせて表示する】 画像をレスポンシブ化する方法

ページ内の画像には様々なサイズのものがあります。
また、端末によって横幅はそれぞれです。
ですので、端末によっては、横幅がはみ出してしまうものが出てきます。

そこで、それぞれの端末で表示しても、画面からはみ出さないように設定してやる必要があります。

CSSで設定する

CSSで画像サイズを width:100% にしておくと、画像が画面からはみ出ないようになります。
height:auto; と書いておくと、自動で高さも調節してくれます。

/* CSS */
img {
    width:100%;
    height:auto;
}


【画像が画面からはみ出したところ】

【画像が画面にキッチリ収まったところ】

これで、画像は全て画面の横サイズ100%で表示されるようになります。
厳密には、上流のクラスで設定したサイズの100%ですが。(；´∀｀)

<!-- HTMLタグ -->
<div class="top">
<img src="●●●.jpg" width="500" height="500">
</div>

/* CSS */
.top img {
    width:100%;
    height:auto;
}

画面の横幅が350pxしかない場合、普通であれば 500px もある画像は右端が切れてしまうのですが、width:100%; で設定してある場合、350pxに縮小されて表示されます。

サムネイルで表示してタップで拡大させる

最小の端末に合わせて画像を小さなサムネイルでページ内に表示しておき、拡大して見たい時には、タップ（クリック）して拡大して表示する方法です。
（サムネから拡大した時の画像へのリンクを貼っておく）

この方法は、サムネイル用の画像が必要なのと、タップやクリックで拡大しないと、大きな画像が表示されない点がデメリットです。

でも、CSS3が表示できないブラウザでも対応できるのがメリットです。
今はほとんどのブラウザでCSS3で対応していますので、メリットの方はそれほどかもです。(；´∀｀)

大きい画像や写真をお客さんに見てもらいたい時には、スマホ端末の横幅に合わせて小さく表示するよりも、こちらの方がよいかもしれません。

<!-- HTMLタグ -->
<div class="top">

<!-- 大きい画像のURLへのリンク -->
<a href="https://■■■.▲▲▲.jpg">

<!-- サムネイル用画像のimgタグ -->
<img src="●●●.jpg" width="300" height="300">

</a>
</div>

一番小さい端末に合わせて小さな画像を表示

一番小さい端末（300px以下程度）に合わせて、小さな画像を表示します。

この方法ですと、どの端末で同じに見えるのは良いのですが、特にパソコンで画像や写真を見るときに小さ過ぎる可能性があります。

【横幅250pxの画像】

昔は、パソコンの画像解像度も小さかったので、この程度の画像サイズでも十分な大きさだったんですが、時代の移り変わりというのは恐ろしいもので。

ブラウン管モニターの時とかは、この程度の大きさでも結構大きな画像サイズでした。(；´∀｀)

でも、今は一番小さい端末に合わせて画像を作ってしまうと、多くの端末でサイズが小さくなりすぎて、お客さんが悶絶してしまう可能性があります。

次ページ

【h1】 レスポンシブの見出しのスタイル 【h3】

前ページ

【ロゴ】 タイトル部分のレスポンシブ化 【ヘッダー】