画像の大きさを最適化する max-width:100%;

2017年4月16日 レスポンシブウェブデザインでスマホに対応する際、PCサイト用の画像の大きさのままだと画面からはみ出てしまうことがあります。スマホの解像度は320px程度のため、幅320px以上の画像を掲載している場合、小型スマホでは崩れて表示されるはずです。 これを回避するには、全ての画像の大きさを300px程度で作成すればよいわけですが、ガラケーサイトとは違いスマホはフルブラウザのため、スタイルシートで表示を最適化することをおすすめします。 具体的には、レスポンシブウェブデザインでPCサイト用とスマホ用のCSSを切り分けたのち、スマホ閲覧時に適用されるCSSの「img」の箇所に「max-width:100%;」などと指定しておくとよいでしょう。 ■画像の大きさを最適化する例 img { max-width: 100%; height: auto; } この「max-width:10

[idr_zz]

え？max-widthって画像自体のサイズを保持するんだ！親要素が画像より大きくても拡大されない。素晴らしい！！ 画像の大きさを最適化する max-width:100%;