画像をレスポンシブに対応させる為にはたった２種類のやり方しかありません。
img画像であればフルードイメージ化させる。
background画像であれば、background-sizeの指定をする。
この２種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに対応させる事が出来ます。
どちらの方法を用いれば良いかは、文章構造から考えてその画像が「imgタグ」で入れるべきなのか、背景画像として入れるべきなのかを考えれば良いだけです。
ポイントとしては、
「img要素」で入れた場合にはフルードイメージ化させる為、画像の原寸より大きく表示される事はありません。
また画像の縦横比も保ってくれる為、幅を縮めると同じ比率で高さも小さくなって行きます。なので基本的には高さの設定はしなくても良い場合がほとんどです。
これに比べ「background-size」を指定した背景画像は指定に寄っては原寸より大きく表示される事があります。
また、背景画像を表示させる為には必要な高さを確保する必要がある為、高さの指定をどうするか、という事が問題になって来ます。
授業では高さを%指定すると不安定になるので、代わりにpaddingで画像の高さ分を確保するという方法を取りました。
「background-size」を指定した物は%指定はもちろん、pxでも1px単位で表示の大きさをコントロール出来る為、こちらの方が便利な場合もあります。
画像のフルードイメージ化
img要素で見せる画像は重要度が高いため、必ず綺麗に見せる必要があります。その為絶対に原寸（100%）以上拡大して表示させるのはNGなので「max-width: 100%」という指定をします。
img { max-width: 100%; }
