Resizing an image in HTML can be accomplished using the width and height attributes of the <img> element. In this article, we’ll explore how to resize an image in HTML with coding examples and examine the output.
HTML Image Tag
The <img> tag in HTML is used to embed images on a webpage. To resize an image, you can set the width and height attributes to specify the desired dimensions.
Here’s a basic example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizing Image in HTML</title>
</head>
<body>
<img src="example.jpg" alt="Example Image" width="300" height="200">
</body>
</html>
In the above example, the image example.jpg is resized to have a width of 300 pixels and a height of 200 pixels. The alt attribute is used to provide alternative text for accessibility.
Output
When you open this HTML file in a web browser, you’ll see the resized image according to the specified dimensions. The browser will adjust the size of the image while maintaining its aspect ratio.
Proportional Resizing
To maintain the aspect ratio of the image when resizing, you can specify either the width or height attribute and let the browser automatically calculate the other dimension.
<img src="example.jpg" alt="Example Image" width="300">
In this example, only the width is specified, and the browser adjusts the height proportionally.
CSS for Stylish Resizing
You can also use CSS for more stylish and responsive image resizing. Add a class to your <img> element and style it in a separate <style> section or an external CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizing Image with CSS</title>
<style>
.resizable-image {
width: 50%; /* Adjust the percentage as needed */
height: auto;
display: block; /* Remove any default inline styles */
margin: auto; /* Center the image */
}
</style>
</head>
<body>
<img src="example.jpg" alt="Example Image" class="resizable-image">
</body>
</html>
In this CSS example, the image is set to be 50% of its container’s width while maintaining its aspect ratio. The display: block; and margin: auto; styles center the image on the page.
Conclusion
Resizing an image in HTML is a straightforward process using the <img> tag. Whether you use the width and height attributes or apply CSS styles, these examples demonstrate how to control the size of images on your webpages.
Leave a Reply