How to Make Image Fit to Screen in HTML

Question

Apu June 03, 2023 . #css . #HowTo

❌

How to Make Image Fit to Screen in HTML

In this article, you will learn how to create a full screen image using css.

The following example shows a full screen responsive image.

Demo - Full Screen Image

How to create a full screen image.

To create a full screen image is easy using css height and width properties.

Add css height property with its value set to 100% and also margin property with its value set to 0 to the <html> and <body> element using css.
```
<style>
  body,html {
    height: 100%;
    margin: 0;
  }
</style>
```

Create an <img> tag. Set height:100% and width:100% using css.

<style>
  img {
    width: 100%;
    height: 100%;
  }
</style>
<img src="https://stories.3schools.in/img/b.png">

Click on the Try it Yourself » button to edit the HTML code.

Demo - full screen image

<style>
  body,html {
    height: ;
    margin: 0;
  }
  img {
    width: 100%;
    height: 100%;
  }
</style>
<img src="https://stories.3schools.in/img/b.png">

Try it Yourself »

Write Your Answer

Apu · Accepted Answer · 2023-06-03T07:47:09+05:30

In this article, you will learn how to create a full screen image using css . The following…