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
How an <img> or <video> should be resized to fit its container with CSS?
The purpose of adding images to websites is to increase their visual appeal and user appeal. But if we didn't have control over the size of the images on websites, they wouldn't be nearly as attractive. Fortunately, CSS makes it quite simple to alter the image size.
The CSS image size can be altered using a variety of methods. First, let's examine the reasons why altering the size of an image in CSS matters. The image would fill every pixel of its size if there were no limits on its size. However, every image should fit inside the container that it is placed in. This is especially crucial when building websites that are responsive.
CSS object-fit property
An image or video can be scaled to fit its content box by using the CSS object-fit property. This property specifies how the content can be filled in the content box or container in several ways, like maintaining the aspect ratio or filling the space as much as possible by extending and lifting it up, etc. The object-position property allows you to modify the alignment position of the content object of the substituted element inside the element's box.
Syntax
Following is the syntax for object-fit property −
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Example
Let's look at the following example, where we are going to use the CSS object-fit property with the fill value.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
background-color: #D5F5E3;
text-align: center;
}
#tp {
width: 400px;
height: 200px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>CSS object-fit property with fill value</h2>
<img id="tp" src="https://www.tutorialspoint.com/cg/images/logo.png">
</body>
</html>
When we run the above code, it will generate an output consisting of the image along with a text displayed on the webpage.
Example
Considering another scenario, where we are going to use the CSS object-fit property with contain value.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
font-size: 15px;
color: #DE3163;
background-color: #F4ECF7;
text-align: center;
}
#tp {
width: 500px;
height: 450px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>CSS object-fit property with contain value</h2>
<img id="tp" src="https://www.tutorialspoint.com/cg/images/logo.png">
</body>
</html>
On running the above code, the output window will pop up, displaying the image along with a text on the webpage.
Example
In the following example, we are going to use the CSS object-fit property with the cover value.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
background-color: #D6EAF8;
text-align: center;
}
#tp {
width: 300px;
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>CSS object-fit property with cover value</h2>
<br>
<br>
<br>
<img id="tp" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Dhoni_behind_Stumps.jpg/330px-Dhoni_behind_Stumps.jpg">
</body>
</html>
When we run the above code, it will generate an output consisting of the image along with a text displayed on the webpage.
109 Views
