Question

我将此代码设置为整个网站的外观。

.mainpage {
  width:85%;
  height: 100vh;
  margin:auto;
  position: relative;
  text-align: center;
  border:1px solid grey;
  z-index:99999999;
}
.skin {
  position: fixed;
  z-index: 0;
  top: 0px;
  left: 50%; 
}
.skin > div {
  position: relative;
  left: -50%;
  height: 1024px;
  width: 1600px;	
}
.image-skin {
  background:url(https://hypercube.gr/skin-specs.jpg);
  position: fixed;
  width: 1600px;
  height: 1024px;
  top:-190px;
}

<div class="mainpage"><h1>main page</h1></div>

<div class="skin">
  <div>
	  <a href="#">
		  <div class="image-skin"> 
		  </div>
	  </a>
  </div>
</div>

当屏幕宽度为1280px时效果很好，但其他任何屏幕宽度都坏了，我怎么能像1280px一样适合所有屏幕？提前致谢这是指向code

的链接

Answer 1

您不应该将import { HttpClient } from '@angular/common/http';设置为1600px，应该使用百分比值，并稍加修改用作背景的图像。 ss代码可以帮助您实现所需的目标

width

   .mainpage {
      width:85%;
      height: 100vh;
      margin:auto;
      position: relative;
      text-align: center;
      border:1px solid grey;
      z-index: 1;
    }
    .skin {
      position: fixed;
      top: 0px;
      left: 50%; 
    }
    .skin > div {
      position: relative;
      left: -50%;
      height: 1024px;
      width: 1600px;	
    }
    .image-skin {
      background:url(https://hypercube.gr/skin-specs.jpg);
      position: fixed;
      /*width: 1600px;*/
      
      height: 1024px;
      /*top:-190px;*/
      width: 100%;
      left: 0;
      text-align: center;
      background-position-y: 0px;
      background-repeat: no-repeat;
      background-size: contain;
    }

“如何在所有尺寸的屏幕上固定'皮肤'”

1 个答案: