How do i make an image fit my screen size in html?

Question

View Discussion

Table of Contents Show

Tiling a large image
Stretching an image
Scaling an image up
Special values: "contain" and "cover"
How do you make the image fit the screen?
How do I stretch a background image to fit the screen in HTML?
How do I make the background image fit my screen size?
How do I resize an image to fit the Web?

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container. It tells the content how to fit in a specific div container in various way such as preserve that aspect ratio or stretch up and take up as much space as possible.

Example 1: This example describes the auto-resize image fit to div container. This example does not contain object-fit property.

html

Output:

In the above example as the object-fit property is not used, the image is being squeezed to fit the container, and its original aspect ratio is destroyed.

Example 2: This example is used to display the part of image when use resize the div container.

html

Output:

Note: Using object-fit: cover; will cut off the sides of the image, preserving the aspect ratio, and also filling in space.

Example 3: This example displays an image without using object-fit property. In this example, the size of the image is set manually and the image will not be able to maintain its aspect ratio and adjust or resize according to div container on resizing the browser window.

html

Output:

Example 4: This example displays the part of image or image using object-fit property. In this example, the size of the image is set manually and the object-fit property is also used. In this case, on resizing the browser the image will maintain its aspect ratio and will not be resized according to div container.

html

Output:

Note: The property object-fit: cover; will cut the sides of the image, preserving the aspect ratio, and also filling in space.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.

Tiling a large image

Let's consider a large image, a 2982x2808 Firefox logo image. We want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. To do this, we can use a fixed background-size value of 150 pixels.

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Result

Stretching an image

You can also specify both the horizontal and vertical sizes of the image, like this:

background-size: 300px 150px;

The result looks like this:

Scaling an image up

On the other end of the spectrum, you can scale an image up in the background. Here we scale a 32x32 pixel favicon to 300x300 pixels:

.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

As you can see, the CSS is actually essentially identical, save the name of the image file.

Special values: "contain" and "cover"

Besides <length> values, the background-size CSS property offers two special size values, contain and cover. Let's take a look at these.

contain

The contain value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container. Try resizing the example below to see this in action.

HTML

<div class="bgSizeContain">
  <p>Try resizing this element!</p>
</div>

CSS

.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

Result

cover

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. Try resizing the example below to see this in action.

HTML

<div class="bgSizeCover">
  <p>Try resizing this element!</p>
</div>

CSS

.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}