If the width
property is set to a percentage
and the height is set to "auto", the image will be
responsive and scale up and down:
If the max-width
property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its
original size:
Background images can also respond to resizing and scaling.
Here we will show three different methods:
1. If the background-size
property is set to "contain", the
background
image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship
between the image's width and height):