How To Resize An Image In HTML

To quickly resize an image in HTML, you can add the height and width attributes to the <img> element. You can then specify the desired height and width of the image in pixels. Alternatively, the style attribute can be used in more complex ways.

In the HTML code snippet example below, the image will display a height of 200 pixels and a width of 400 pixels.

<img width="400" height="200" src="example.jpg">

Take care not to distort the aspect ratio of the image. To avoid aspect ratio distortion, add just one attribute and let the browser adjust the other image attribute automatically.

I added the width attribute to the <img> element in the HTML code snippet example below. This alternative can be helpful if you know the width of your HTML container <div> but the size of the image is unknown.

<img width="400" src="example.jpg">

And here is one last quick and easy example of how to resize an image in HTML. Before external CSS stylesheets became popular, the style attribute was often used to adjust the size of an image.

<img style="width:400px; height200px;" src="example.jpg">

Using the <img> style attribute to resize an image in HTML prevents external style sheets from changing the size of your image. Furthermore, you can quickly add CSS properties to your <img> element for one-off styling requirements versus overloading an external CSS stylesheet.

<img style="max-width:400px; float:left;" src="example.jpg" >

Various CSS properties can help you resize images in HTML, such as width, height, max-width, max-height, min-width, min-height, object-fit, etc. Once you learn these properties, you can apply them directly to the <img> element to quickly resize an image in HTML.

HTML

Resources:

• The Image Embed element. Mozilla. Retrieved September 4, 2024.
• HTML Images. W3Schools. Retrieved September 4, 2024.
• Images. HTML Living Standard. Retrieved September 4, 2024.