Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Example
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.
<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 = "https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt = "logo">
</div>
</body>
</html>
Example
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.
<html>
<head>
<style>
.image {
width: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
}
img {
width: 100%;
height: 50%;
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 = "https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt = "logo">
</div>
</body>
</html>
Example
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.
<html>
<head>
<style>
.image {
width: 30%;
min-height: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
background-image: url("https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h3> Using the <i> background-size CSS property </i> to resize image proportionally </h3>
<div class = "image"></div>
</body>
</html>
Users learned to change the image dimensions proportionally. Here, all we need to do is set up image dimensions in the percentage rather than in pixels or rem. Also, users can use the ‘background-size’ CSS property to proportionally change the background image's dimensions.
329 Views
To Continue Learning Please Login