はじめに

img レスポンシブというようなワードでimgタグによって出力される画像をレスポンシブ対応させようとしたことはないでしょうか？
いろいろな記事を参考にしてるとどれが正解のコードなのか分からなくなってしまいます。
デザインに正解はないから見た目が整っていればいいんだよという人もいれば、これはHTMLのルールに則っていないからダメだという人もいます。
初学者は何を参考にすればいいのか分からず頭を抱えてしまうので、テンプレートを基にコードを書いて貰えばいいのでは？と思ったので、今回はimgタグのレスポンシブのレンプレートを作ります

前置き

以下の知識は知っているものとして話を進めていきます。

ブロックレベル要素
インライン要素
imgタグはインライン要素
width
max-width

画像をレスポンシブ対応していく

早速レスポンシブ対応にしていきたいところなのですが、imgタグはブロックレベル要素の子要素にして扱うということを知っておいてください。
HTMLの配置ルールではブロックレベル要素の中にインライン要素を配置するという考え方があるのでそれに則り、imgタグはブロックレベル要素の中に配置していきます。

imgタグの親要素は何タグにするべき？

HTMLは文脈を意識してマークアップする必要があるので、その画像がどのような扱われ方をしているかに注目します。
と言われましても。。。という方は少なくないはず。
まずはimgタグの親になるタグを知っておく必要があります。
以下の三種類がimgの親になることが多いです。

p
figure
div
どのよう時にpタグ、figureタグ、divタグを使いわかればいいのか次で紹介します。

pタグ

imgタグにalt属性がある時
画像がないとその文脈が分からない時

figureタグ

文脈が画像を参照している時

divタグ

pタグ、figureタグどちらにも当てはまらない時
見た目だけを整えたい時

テンプレートを作る

style.css

img {
  max-width: 100%;
}

もしくはこちらでも大丈夫です。

style.css

img{
  width: 100%;
}

imgのheightは初期値がautoなので、わざわざheight: auto;を書かなくても大丈夫です。

テンプレートを使用した例

今回は見た目だけ整えたかったのでimgタグの親にはdivタグを用いています。
異なるwidthでもちゃんと比率を保持してくれるようになっています。

See the Pen responsive-lecture by Daichi Nabeshima (@nabeshi) on CodePen.

参考サイト

画像をp要素にするかfigure要素にするか