How to Scale an Image in HTML

1. Scale a Large-Size Image Within the Browser’s Viewport in HTML
2. Use the width and min-width Properties to Scale an Image in HTML

In this tutorial, we will illustrate methods to scale large-sized images in HTML.

Scale a Large-Size Image Within the Browser’s Viewport in HTML

We can scale a large image in HTML using the width and height properties in the image. A large sized-image will go off the edge of the screen. To scale the image to the viewport size, we can use a container and set its height and width properties to the viewport’s height and width. We can use the vh and vw units to set the size. One unit of vh and vw corresponds to 1 % of the viewport’s height and width. We can set the image’s height and width using the setting to 100%. The image should be inserted inside the container. Then, the large sized-image will fit into the viewport.

For example, create a div in HTML with the class container. Inside the div write the img tag and insert a large-sized image. In CSS, select the container class and set its height and width to 100vh and 100vw. Next, select the img tag and set its height and width to 100%.

In the example below, we scale a large image to fit into the viewport using units like vh, vw, and %.

Example Code:

<div class="container">
    <img src="https://images.all-free-download.com/images/graphiclarge/large_mushroom_199318.jpg" >
</div>

.container{
  height:100vh;
  width: 100vw;
}
img {
 width : 100%;
 height: 100%; 
}

Use the width and min-width Properties to Scale an Image in HTML

We can use the width and min-width properties to scale an image in HTML. We can use these properties while styling the <img> tag. The width property specifies the width of the element. The min-width property specifies the minimum width of the element. It will only be applied if the content is smaller than the minimum width. Else, this property will have no effect. Furthermore, this property also prevents the value of width property from being smaller than min-width. We denote the width and min-width in pixels in this method.

For example, inside the HTML body, write the <img> tag. Inside the <img> tag, specify the path to the image by the src attribute. Then, give width of 25vw and min-width of 140px in the style attribute. Then, close the <img> tag followed by all the previously opened tags.

We have used the width and min-width properties to scale the image. The large-size image that does not fit in the viewport can fit in the viewport. The 25vw width in the example below shows that the width corresponds to 25% of the viewport’s width. In this way, we can scale the image using the style tag in HTML.

Example Code:

<img src="/img/DelftStack/logo.png" style="width: 25vw; min-width: 140px;" />