html - 使网页适合屏幕

试图使网页适合屏幕,这样您就不必向上或向下或向左和向右滚动。并且图像居中。这是当前代码:

#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>

回答1

如果您想向下滚动以显示更多页面,则溢出将不起作用。要解决这个问题,您必须从图像中裁剪出白色背景,我不确定它为什么会存在,并且最好在裁剪后使背景透明,以防万一想改变背景颜色。

您将 right 设置为 11,但没有指定 value (与图像上的宽度和高度相同),这根本不起作用;您必须指定一个 value 例如像素或 rem。而 z-index: index [num] 也无效,它只是 z-index: [num]。

你图片上的alt标签是一个png文件,没有多大意义,应该是描述,或者图片的链接。

#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>

回答2

您可以通过包含 div、https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 以及 css 中的 vh 和 vw 声明来实现这一点。

vh 确定视图高度,因此 100vh 是窗口的 100%。使用您的资产,我将图像堆叠在屏幕的 95% 上,将下面的文本堆叠在 5% 上。 vw 的工作原理相同,但对于视图宽度。

.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;
 }

这是一个codepen:https://codepen.io/danhebdon/pen/vYdmxmv