Resize Images and Keeping Ratio in HTML

share link

by Abdul Rawoof A R dot icon Updated: Jan 18, 2024

technology logo
technology logo

Guide Kit Guide Kit  

In HTML, one of the simplest ways to resize an image in the HTML. Using the height and width attributes on the image tag accomplishes it. These values specify the peak and width of the photo element. 


The values are always set in px, that is, CSS pixels. The height and width attributes of the IMG element specify the height and width of an image. 

Syntax: <img src=""width=""height="">.  

Resizing is nothing but a property that defines if an element is resizable by the user. It is the process of image resizing in HTML. The resize property does not apply to inline elements where the overflow="visible". So, make sure that the overflow is set to "scroll", "hidden", and "auto". To manipulate the resizing of an element, we should set the overflow aside from visible. It is like overflow: hidden or overflow: scroll. 


To keep the aspect ratio in HTML, in the CSS for the, add a percentage value for padding-bottom. Also, setting the position to a relative will maintain the aspect ratio of the container. It also maintains the value of the padding determines the aspect ratio. 


Here is an example of how to resize images and keep ratio in HTML: