Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use image height and width attribute in HTML Page?
Images make web content more engaging and help users better understand the information presented. In HTML, we can control the display size of images using the width and height attributes of the <img> tag.
The <img> tag is a self-closing element that requires the src attribute to specify the image location. The width and height attributes allow us to define the display dimensions of the image without modifying the original file.
Syntax
Following is the syntax for using width and height attributes with the image tag −
<img src="url" alt="description" width="value" height="value">
The width and height values can be specified in pixels (e.g., width="300") or as percentages (e.g., width="50%"). When using pixels, the px unit is optional for these attributes.
Using Height Attribute
The height attribute sets the vertical dimension of the image. When only height is specified, the browser automatically adjusts the width to maintain the original aspect ratio.
Example
Following example demonstrates setting only the height of an image −
<!DOCTYPE html> <html> <head> <title>Image Height Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Original Image vs Height-Modified Image</h2> <p>Original size:</p> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo"> <p>With height="150":</p> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" height="150"> </body> </html>
The first image displays at its original size, while the second image has a fixed height of 150 pixels with proportional width −
Original Image: [OpenCV Logo - original size] Height-Modified Image: [OpenCV Logo - 150px height, proportional width]
Using Width Attribute
The width attribute controls the horizontal dimension of the image. Similar to height, specifying only width maintains the aspect ratio by automatically adjusting the height.
Example
Following example shows how to set the width of an image −
<!DOCTYPE html> <html> <head> <title>Image Width Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Width Control Example</h2> <p>Width set to 300 pixels:</p> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" width="300"> <p>Width set to 50% of container:</p> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" width="50%"> </body> </html>
The first image has a fixed width of 300 pixels, while the second image takes 50% of its container's width −
300px width: [OpenCV Logo - 300px wide, proportional height] 50% width: [OpenCV Logo - 50% container width, proportional height]
Using Both Width and Height
When both width and height are specified, the image is resized to exact dimensions. This may distort the image if the aspect ratio differs from the original.
Example
Following example demonstrates setting both dimensions −
<!DOCTYPE html> <html> <head> <title>Image Width and Height</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Fixed Dimensions Example</h2> <p>Original proportions maintained (width only):</p> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" width="200"> <p>Fixed dimensions (may distort):</p> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" width="200" height="100"> <p>Square format:</p> <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" width="150" height="150"> </body> </html>
The examples show how fixing both dimensions can stretch or compress the image compared to maintaining aspect ratio −
Proportional: [OpenCV Logo - 200px wide, auto height] Fixed dimensions: [OpenCV Logo - 200×100px, possibly distorted] Square format: [OpenCV Logo - 150×150px, stretched to square]
Width and Height vs CSS Styling
While HTML attributes work well for basic sizing, CSS provides more flexibility and control. The HTML attributes set the initial size, while CSS can override these values and provide responsive behavior.
Example
Following example compares HTML attributes with CSS styling −
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes vs CSS</title>
<style>
.css-styled {
width: 250px;
height: 100px;
border: 2px solid #007bff;
object-fit: cover;
}
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Comparison: HTML Attributes vs CSS</h2>
<p>HTML attributes (width="200" height="80"):</p>
<img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" width="200" height="80">
<p>CSS styling with object-fit (maintains aspect ratio):</p>
<img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" class="css-styled">
<p>Responsive image with CSS:</p>
<img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="OpenCV Logo" class="responsive-img">
</body>
</html>
CSS provides better control with properties like object-fit and responsive design capabilities.
Best Practices
Following are some best practices when using width and height attributes −
Maintain aspect ratio − Specify only width or height to prevent distortion.
Use CSS for complex layouts − HTML attributes are good for basic sizing, but CSS offers more control.
Include alt attributes − Always provide descriptive alternative text for accessibility.
Consider responsive design − Use percentage values or CSS media queries for mobile-friendly images.
Optimize file sizes − Don't rely solely on HTML/CSS to make large images smaller; resize the actual files.
Conclusion
The width and height attributes provide a simple way to control image display size in HTML. For best results, specify only one dimension to maintain aspect ratio, or use CSS with properties like object-fit for more advanced control. Always combine proper sizing with good accessibility practices and optimized image files.
2K+ Views
