max-widthで画像のサイズを縮小、拡大する。

最近、PCのみならずスマフォでもコーディングする機会があります。

PC用のサイズに合わせて画像のサイズを指定するとスマフォのサイズでは、ズレてしまうことがあります。

こういうときは、

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

と指定することで解決します。

max-widht:100%と指定すると、親要素の幅を超える大きさの画像を自動的に縮小してくれます。　　

height: auto;を指定することで、画像を縮小した時に、高さも自動的に調整してくれます。

サイズの違うサイトを作るときに便利な方法でした。