In this tutorial we will show you the solution of how to resize image in CSS, it is often necessary to fit an image within a specific dimension. Images must be exactly aligned with the layout while creating web pages.
It's equally as crucial to ensuring that your visuals maintain their best quality and correct aspect ratio across all screen sizes. Your images may appear distorted or cut off if you don't have them. This guide will show you how to resize an image with CSS.
Step By Step Guide On How To Resize Image In CSS :-
By defining the width and height of an image, we can resize it. To ensure that huge pictures do not exceed the width of their container, a typical method is to utilise the max-width: 100%; and height: auto; attributes.
In the following code, we'll show how to resize an image in CSS in a variety of ways:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.resize {
width:auto;
text-align:center;
padding:25px;
}
Retention of Aspect Ratio
img {
max-width:100%;
height:auto;
}
/*
Absolute Resizing
img{
height: 120px;
width: 210px;
}
*/
/*
Relative Sizing
img{
height: 100%;
width: 100%;
object-fit: contain;
}
*/
</style>
</head>
<body>
<div class = "resize">
<p id="image"><img src="www.abc.jpg">
</p>
</div>
</body>
</html>
- We begin by typing <! DOCTYPE html>, which informs the web browser of the file's HTML version.
- On the other hand, the <html> element is used to indicate the beginning of HTML content.
- The information about web pages is now contained in the <head> tag. This tag uses the <title> element to allow us to provide a web page title. The < head> and <title> tags are examples of paired tags. As a result, both have the closing tags </head> and </title>.
- Finally, the <body> element is used to specify the webpage's content. This is where all of the website's material will be written.
- In the head tag, a <style> tag was used. In the Retention of Aspect Ratio step, we have adjusted the height as auto to enable automatic sizing to keep the aspect ratio.
- In Absolute Resizing you can specify the height and width values and the static ones in pixels (px), ems (em), or any absolute-size format with absolute resizing. In the above example, we have defined the size in px.
- Sizing pictures relative to the parent <div> or the size of the client viewport is known as relative sizing. The viewport is the parent container when that attribute is applied to an image as the sole element.
- The image's original dimensions are preserved when object-fit: contain is used. CSS then adjusts the image size till the complete image is viewable. In the above example relative sizing, we have mentioned it and given the function object-fit: contain.
- Note that above we have commented on the Absolute Resizing and Relative Sizing.
- The</body> and </html> tags, respectively, are used to close the <body> and <html> tags.
Conclusion :-
CSS is the foundation of web pages and is used to style websites and web applications.
With proper resizing and scaling achieved through CSS you can ensure that your images look great on all devices and browsers. I hope this tutorial on how to resize image in CSS helps you.
About Amruta
