AB型技術系 主に備忘録

ほぼプログラム関連の備忘録

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

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

f:id:freelancer13:20170407025530j:plain

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

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

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

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

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

f:id:freelancer13:20170407025537j:plain

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