How do I increase my image width and height according to the viewport of the user while keeping the-CodePudding

I'm making a website and the website is basically just a huge image except for the clickable elements and I was wondering how I could make the image size increase according to the the user's screen size so that the image doesn't look stretched, but still fits the whole screen. This is my first time working with viewport, so I can't exactly say I understand it very well. Here's some code to help out:

<div class="Image">
          <img src="Background.png"/> 
        </div>

.Image {
    width: 100vw;
    height:  100vh;
    object-fit: contain;
}

The first part was written in index.html while the second was written in style.css. Just for your info, the html part was written in <body>.

CodePudding user response：

<div class="fullscreen" /> 

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;

    background-image: url(Background.png);
    background-size: cover;
    background-position: center;
    width: 100vw;
    height:  100vh;
}

CodePudding user response：

You have to apply

  width: 100vw;
  height: 100vh;
  object-fit: contain;

To img directly you can use id class or img directly but last method is not recommended as it will apply to all img tags in the document

I have used red background to show how much area image covers but as object-fit: contain; so image ratio's are maintained
Read this to know more about object-fit

Use

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

To remove any unnecessary horizontal scroll bars as tags have some default margin and padding . So , here used the body tag

.Image {
  width: 100vw;
  height: 100vh;
  object-fit: contain;/*Can be cover , fill , none...*/
  background-color: red;
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<div>
  <img src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="Image" />
</div>