Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
communitycreator

How to resize an image proportionally with CSS

Behzad Ahmad

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

In the CSS file, max-width has been set to 50%. Click run to view the output. Now change its value and run again. You will notice that the image has resized proportionally.

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.

RELATED TAGS

html
css
communitycreator
RELATED COURSES

View all Courses

Keep Exploring