一枚の画像をCSSでPC表示とスマホ表示の両方に対応する方法

例えば社長の挨拶のようなページで、PC表示では300ピクセル程度の社長の画像を、右または左にフロートさせて、画像に回り込むように本文を配置し、スマホ表示ではフロートを解除し画像を100%表示して、画像の下に本文を配置する場面は多々遭遇する。

毎度毎度、眉間にしわを寄せながら試行錯誤するので自分用備忘録。

HTML



<img src="img/photo01.jpg" width="2950" height="2094">

何の変哲もないPタグの中に画像を配置。今回は横幅2950ピクセルのわざと大きな画像を用意して、PC表示にしてもはみ出すほどの画像を使用し、PC表示も調整し、更にスマホも最適化する。

CSS

/* スマホ表示 */
.pcsp01 img {
	max-width:100%;
	height:auto;
}

/* PC表示 */
@media (min-width: 768px) {

.pcsp01 img {
	width:320px;
	height:auto;
}

}

スマホ表示は「max-width:100%;」とすることでデバイスの画面一杯にピッタリ表示される。

スマホ表示

PC表示はメディアクエリを指定し、PC表示のみに適応させる箇所にピクセルで指定して表示させる。

PC表示

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)