How To Change Image Size In HTML?
Last Updated :
16 Oct, 2024
To change the size of an image in HTML, you can use width and height attribute within <img> tag. Alternatively, we can use CSS properties to set or change the image size. Change image size feature is useful while developing a responsive web page.
Change Image Size using HTML width and height Attributes
The simplest way to resize images in HTML is by using the width and height attributes directly in the <img> tag. This method sets the dimensions of the image in pixels, forcing the browser to resize the image to the specified values.
Syntax
<img src="image" width="300" height="200" alt="Description">
Example: This example will display the image with a fixed width of 300 pixels and a height of 200 pixels. The browser will resize the image to these specific dimensions regardless of the original size of the image.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Resizing with HTML Attributes</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Fixed Size Image Using HTML Attributes</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240911105255/geekforgeek.png"
width="300" height="200" alt="Fixed Size Image">
</body>
</html>
Output: The image will appear at the size of the 300*200pixels, no matter what the original size is.
Adjust Image Size Using HTML AttributesChange Image size using CSS width and height Properties
CSS provides more flexibility to change the image size. CSS can dynamically resize images based on the parent container's size, enabling responsive design. With CSS, you can set fixed dimensions, percentage-based dimensions, or use properties like max-width and min-width for more control.
Syntax
img {
width: 300px; /* Sets the image width */
height: 200px; /* Sets the image height */
}Example: Set the image width ad height to 300px and 200px respectively.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Image Using CSS</title>
<style>
img {
/* Set the full width of its parent container */
width: 100%;
/* Maintains aspect ratio */
height: auto;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Responsive Image Using CSS</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240911105255/geekforgeek.png"
alt="Responsive Image">
</body>
</html>
Output: The output image will adjust its width to fit the parent container and maintaining its original aspect ratio.
Change Image size using object-fit to Control Aspect Ratio
The object-fit CSS property allows to control over how an image fits within a container without distortion or stretching. It is useful for displaying images inside fixed-size containers while maintaining the original aspect ratio. You can use values like cover, contain, fill, and scale-down to specify how the image should be scaled or cropped.
Syntax
img {
width: 100%;
height: 300px;
object-fit: cover; /* Options: contain, fill, cover, scale-down */
}Example: The image will cover the entire 300px height of the container and the width will adjust to fill the container's width. Some parts of the image may be cropped to achieve this.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Resizing with object-fit Property</title>
<style>
img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Image Covering a Container</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240911105255/geekforgeek.png"
alt="Covered Image">
</body>
</html>
Output: The output image will completely fil the containers height and width with some potential cropping to the fit aspect ratio.
Similar Reads
How to Resize an Image in HTML?
Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint
2 min read
How to Change HTML Image Size in Markdown ?
In Markdown, you may often find the need to adjust the size of images within your HTML content. Whether you're working on a blog post, documentation, or any other type of content, resizing images can be crucial for maintaining a visually appealing layout. ApproachThis approach involves directly modi
2 min read
How to Insert an Image in HTML?
To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method
1 min read
How to Change Font Size in HTML ?
To change the font size of any text we can use the CSS font-size Property, or some HTML keywords have some fixed font size but we change them by using this CSS property. We can use style attributes in the HTML. As we know, HTML has no <font> tag, so we are using CSS style to add font size. The
2 min read
How to Change Button Size in HTML?
To change the size of a button in HTML, there are several methods such as using the style attribute, external CSS, or adjusting the padding and font size. Modifying the button’s size enhances both the visual design and the user experience of a website.Here are three approaches to changing the size o
2 min read
How to align Image in HTML?
Aligning images within a webpage is an essential part of web design. It allows you to control how images are positioned about surrounding content. In HTML, there are several ways to align images using both attributes and CSS techniques, ranging from simple alignment to more advanced responsive layou
4 min read
How to Change the Font Size in HTML?
Change the font size means increase or descrease the font size using HTML. The <font> size attribute was used to change the font size in HTML. The <font> tag is depreciated in HTML5 an not in use. Now, CSS font-size property is used to change the fint size.Table of ContentUsing HTML<f
2 min read
How to resize an image in an HTML 5 canvas ?
The canvas element is part of HTML 5 and it allows the rendering of 2D shapes and bitmap(also called "raster") images. A canvas actually has two sizes: the size of the element. the size of the element's drawing surface. The element's width and height attributes set both the size of the element and t
1 min read
How to Add Image in HTML Table ?
Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a
2 min read
How to Arrange Images and Text in HTML?
In HTML, arranging images and text is essential for creating visually appealing and readable web pages. We can position images in various ways to achieve the desired layout, including the inline with text, above, below, or beside it. Understanding how to align and arrange these elements helps to enh
5 min read