Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Resize image proportionally with CSS
To make a responsive design of the application, we also require to make an image responsive. If images are not responsive, overflow occurs in the app, and it looks worst.
So, we also require to increase or decrease the images' dimensions proportional to the parent element's dimensions. Here, we will learn various ways to resize images proportionally with CSS.
Syntax
Users can follow the syntax below to resize the image proportionally using the 'width' CSS property.
img {
width: 100%;
height: auto;
}
In the above syntax, we have set 100% width and auto height for the image, making it responsive.
Method 1: Using Width and Height Properties
In the example below, we have created the div element, given the 'image' class name, and added an image inside the div element as a child.
In CSS, we have set the width for the div element in the percentage, which is equal to the 30% of the total width. Also, we have set 100% width and auto height for the image. Users can change the screen size and observe that image size reduces and increases proportionally to the screen size
<!DOCTYPE html>
<html>
<head>
<style>
.image {
width: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2> Using the <i> width CSS property </i> to resize image proportionally </h2>
<div class="image">
<img src="/html/images/logo.png" alt="logo">
</div>
</body>
</html>
A responsive image displayed within a red-bordered container that scales proportionally as the screen size changes.
Method 2: Using Object-fit Property
In the example below, we have used the 'object-fit: contain' CSS property to reduce the size of the image proportionally. Here, we have set the proportional width for the parent div element of the image. Also, we have used the 'object-fit: contain' CSS property for the 'img' element. In the output, users can observe that image is responsive, and its dimensions change according to the div element's dimensions
<!DOCTYPE html>
<html>
<head>
<style>
.image {
width: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
}
img {
width: 100%;
height: 200px;
object-fit: contain;
}
</style>
</head>
<body>
<h3> Using the <i> object-fit: contain CSS property </i> to resize image proportionally </h3>
<div class="image">
<img src="/html/images/logo.png" alt="logo">
</div>
</body>
</html>
An image that maintains its aspect ratio and fits completely within the specified container dimensions using object-fit.
Method 3: Using Background-size Property
In the example below, we have used the 'background-size' CSS property to change the dimensions of the image proportionally. Here, we have set the background image for the div element. Also, we have used the 'contain' as a value of the 'background-size' CSS property. It spreads the images into the whole div. If the dimensions of the div element increase, the image size also increases. If the div element's dimensions reduce, the image's size also reduces
<!DOCTYPE html>
<html>
<head>
<style>
.image {
width: 30%;
height: 200px;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
background-image: url("/html/images/logo.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h3> Using the <i> background-size CSS property </i> to resize image proportionally </h3>
<div class="image"></div>
</body>
</html>
A background image that scales proportionally within its container while maintaining aspect ratio and center positioning.
Key Properties for Proportional Resizing
| Property | Value | Description |
|---|---|---|
width |
100% |
Makes image take full width of container |
height |
auto |
Maintains aspect ratio automatically |
object-fit |
contain |
Scales image to fit within container |
background-size |
contain |
Scales background image proportionally |
Conclusion
Users learned to change the image dimensions proportionally using width/height properties, object-fit, and background-size. The key is setting dimensions in percentages rather than fixed units to maintain responsiveness across different screen sizes.
665 Views
