widthとmax-width

widthは横幅を指定します。
max-widthは画像の横幅の最大値を指定します。

▼（描画領域に合わせて拡大したり縮小したりする）は、画像に対してwidthプロパティを使います。

▼（原寸より大きくはしたくない場合）max-widthプロパティを使えば実現できます。

widthプロパティの値に「%」を使って割合で指定した場合は、親となるブロックの横幅に対する割合を指定したことになります。
・width: 100%;は「親ブロックの横幅に一致するように拡大縮小する」という指示になり、
・max-width: 100%;は「最大でも親ブロックの横幅に一致させる（＝親ブロックよりも画像の方が大きいなら自動縮小させる）」という指示になる

参考サイト：http://www.nishishi.com/css/image-max-width.html
参考サイト：http://www.htmq.com/style/max-width.shtml
参考サイト：https://dekiru.net/article/13193/