Responsive Web Design - Images

Responsive Web Design-Images

Responsive Web Design - Images
Previously, we used a media query to change the size of an image if the viewport was narrower than a certain threshold. 
There is another technique we can use that allows images to scale with the viewport width without using media queries.
Using The width Property
Property is set to a percentage and the height property is set to "auto", the image will be responsive and scale up and down.
Example - 

max-width Property - 
If Property value is set to 100% image can scale downwards but not upwards 
Example - 
Change image as size changes - 
Different images for different screen sizes -
Example - 
Output -