make the webpage fit into the screen-CodePudding

Trying to make the webpage fit into the screen so that you don't have to scroll up or down, or left and right. And the image is centered. Here is the current code:

#copyright {
  top: 0px;
  right: 11;
  z-index: index 1;
}

#image {
  position: absolute;
  height: 2;
  width: 2;
  z-index: index 2;
}

<a href="https://lensdump.com/i/rSRDHc">
  <img id="image" src="https://i3.lensdump.com/i/rSRDHc.png" alt="rSRDHc.png" border="0" /></a>

<div id="copyright"> ©apple </div>

CodePudding user response：

You can achieve this with a containing div, flexbox, and the vh and vw declarations in css.

vh determines the view height, so 100vh is 100% of the window. With your assets I've stacked the image on 95% of the screen and the text below on 5%. vw works the same but for view width.

.container{
  height: 95vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 }
 #image{
  width: 100%;
  height: 100%;
 }
 #copyright{
  height: 5vh;
  width: 100vw;
  text-align: center;
 }

Here is a codepen: codepen

CodePudding user response：

Overflow wouldn't work if you wanted to scroll down to show more of the page. To fix that, you would have to crop the white background out of the image, which I'm unsure of why it's there in the first place, and it would also be best to make the background transparent after you crop it, in case you wanted to change the background colour.

You had the right set to 11, but didn't specify a value (same as your width and height on the image), which doesn't work at all; you have to specify a value e.g pixels or rem. And z-index: index [num] also isn't valid, it's just z-index: [num].

The alt tag on your image is a png file, which doesn't make much sense, it should be a description, or the link to the image.

#copyright {
  right: 11px;
}

#image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.7);
  z-index: -1;
}

body {
  overflow: hidden;
 }

<a href="https://lensdump.com/i/rSRDHc">
  <img id="image" src="https://i3.lensdump.com/i/rSRDHc.png" alt="rSRDHc.png" border="0" /></a>

<div id="copyright"> ©apple </div>