How to resize an image proportionally with CSS

Overview

In modern responsive webpages, the resize image property is used to resize an image automatically in order to fit the div container. In order to create the resize image property, we use the max-width property in CSS.

This property has no effect if the height and width are already defined in the HTML.

Syntax

image 
{
    max-width:100%;
    height:auto;
}

We use height:auto in the syntax to override any height attribute already defined for the image.

Code

Code explanation

• The HTML file imports an image from a URL.
• Lines 7–11 of the CSS file use the max-width property to define the maximum width of the image.