widthとmax-width

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

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

img{
width:100%; /*横幅に合わせて自動で拡大縮小する*/
}

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

img{
max-width:100%;/*横幅に合わせて自動縮小はするが、拡大はしない*/
}

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/

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です