画像(img)の修正

viewportタグ(<meta name="viewport" content="width=device-width, initial-scale=1.0">)を使用時、スマートフォン用の一般的な画面幅(320px)を超えるサイズの画像が配置してあると、画面のレイアウトが大きく崩れてしまい、「モバイルフレンドリーテスト」でも、「コンテンツの幅が画面の幅を超えています」と警告されてしまいます。

その為、スマートフォン用のスタイルシートでは、あらかじめ画像のサイズが画面幅を超えたどきには、どのように表示するのかを指定する必要があります。

スマホの画面幅をはみだした画像

元々の画像サイズが全て320pxを超える場合は、以下のように指定すれば、綺麗に画面内に収まります。

【HTML】

<html>
<body>
<div id="page_body">
    <img src="main.jpg" alt="メイン画像">
</div>
</body>
</htm>

【CSS】

.page_body img {
	max-width:100%;
}

「max-width」は、最大値の設定です。例えば、画面の幅が960pxあって、画像の幅が1280pxあるときは、画面幅の最大値「960px」で画像は表示されます。

画面の幅が960pxあって、画像の幅が280pxしかない場合は、画像はそのままのサイズ「280px」で表示されます。

様々なサイズの画像が混同している時は…

画像サイズを「width:50%」や「width:600px」のように上記以外の方法で指定すると、スマホ表示では、画像が親要素の幅に引き伸ばされぼやけてしまったり、画面から画像がはみ出てしまいます。

しかし、様々な条件でそうせざるを得ない場合もあるでしょう。そんなときは、imgタグに一つずつCSSを指定するなどの工夫が必要となります。

スマホの画面でぼやけた画像

【HTML】

<img src="main.jpg" alt="メイン画像" class="main_img">
<img src="sub.jpg" alt="サブ画像" class="sub_img">

【CSS】

.main_img {
	width:auto;
}
.sub_img {
	width:100%;
}
スポンサードリンク