読者です 読者をやめる 読者になる 読者になる

max-widthでスマホサイトの画像サイズを自動調整

PCサイトの画像をスマホで表示すると横幅が大きすぎてはみでてしまいました。

f:id:freelancer13:20170407025530j:plain

最初からスマホでも見れるように画像の大きさを調整しておけばよかったです・・・

既に多くの画像でページを作成しているのでリサイズするのは面倒です

そこでスマホサイト用のCSSに以下の記述を追加しました

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

これで#contents内の画像の横幅をスマホの横幅におさまるようにサイズを調整してくれます
高さも自動で調整してくれます

f:id:freelancer13:20170407025537j:plain

いいかんじにおさまったのではないでしょうか