You can easily change the size of an image in HTML. In this tutorial, you will know all the methods to change the size of an image.
Methods to Change the Image Size in Html
Follow the below methods to change the image size.
Method 1: Using the width and height attributes
You can use the width and height attributes of the image while defining the img tag.
<img src="image.jpg" alt="Image" width="600" height="400">In the above case, We are setting the width and height of the image as 600 widths and 400 heights.
Method 2: Using CSS
In the second method, you will use the class to define the image width and height. Just use the class attribute inside the img tag and define its property in the CSS file.
img src="image.jpg" alt="Image" class="img-size">
.img-size {
width: 600px;
height: 400px;
}Method 3: Use the inline CSS
You can also use the inline CSS to set the image size. Just define the style attribute with the img tag.
<img src="image.jpg" alt="Image" style="width: 600px; height: 600px;">
Sample Code
<html>
<head>
<style>
body {
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Image" width="600" height="400">
</body>
</html>Output
Conclusion
These are the methods to change the image size. You can use any of them but use the width and height attributes inside the img tag. It’s because if you will use the inline or internal or external css then it may affect the aspect ratio of the image, resulting in distortion. Thus width and height attribute allows you to maintain the aspect ratio of the image.
