我已完成研究，但似乎无法使任何工作正常进行。这是我的 html:
<body ng-app="starter">
<ion-pane>
<head>
</head>
<ion-content>
<body>
<img src="resources/img.png">
</body>
</ion-content>
</ion-pane>
</body>我的图片出现了，但不是全屏。也剪掉了一点。所以我需要图像占据整个屏幕，没有重复，也没有图像中的任何丢失。谁能帮我解决这个问题？
最佳答案
这是呈现后的 HTML，还是来自您的编辑器？
如果您能向我们展示您的应用程序页面的打印屏幕，以及您的 HTML 在浏览器呈现后，我们将不胜感激!
- 这个应用程序只能在某种固定的分辨率/屏幕上运行吗？如果不是，我认为将裁剪后的图像刚好放在屏幕上不是一个好的解决方案，因为那里有许多其他具有不同分辨率的屏幕，如果您想要一个背景覆盖所有这些屏幕，那么它肯定会在某些分辨率/屏幕上被裁剪。
考虑到这一点，您有几个选项可以为任何类型的屏幕/分辨率创建全尺寸背景。
您可以创建一个居中背景，无论图像多大或多小，它始终位于特定屏幕的下方，只需使用两个 CSS 规则:
.app-background {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
z-index: -1;
}
.app-background > img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
.app-background 将是背景的包装器并且将具有:
- position: fixed; 以便在其中一个父元素具有水平/垂直滚动条的情况下保持其位置，并且不占用空间用于页面内容；
- 上/左:-50%； width/height: 200%; 使其居中并使其成为其父级/屏幕尺寸的两倍； (现在您的图片有一个可以居中的父级)；
- 溢出:隐藏； z-index: -1; 只是为了在内部裁剪图像并确保页面内容不会隐藏在背景后面；
.app-background > img 将是用作背景的图像，并且将具有:
- position:absolute；上/右/下/左:0； margin: auto; 使图像在 .app-background 内水平和垂直居中；
- min-width/min-height: 50% 以防止图像小于容器分辨率/屏幕尺寸的 100%。
概念(以全屏查看)
html, body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
}
.app-background {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
z-index: -1;
}
.app-background > img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
/* Instructions below this comment are NOT needed for the solution */
body {
font-family: Calibri, Arial;
text-align: center;
}
body:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
margin-left: -0.25em;
}
*, .border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.app-container {
position: relative;
border: 2px solid red;
color: red;
display: inline-block;
vertical-align: middle;
width: 40%;
height: 40%;
}
.app-background {
position: absolute;
border: 2px solid purple;
color: purple;
}
.app-container:before,
.app-background:before {
content: '.app-background';
font-size: 25px;
display: block;
padding-bottom: 10px;
}
.app-container:before {
content: '.app-container';
}
.app-background > img {
opacity: 0.5;
z-index: -1;
}<div class="app-container">
<b>This red box is what you will see in your screen.</b>
<div class="app-background">
This purple box is where your image will be centered and cropped.
<img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">
<b>Feel free to zoom-in/out your browser to see the effect from different resolutions!</b>
</div>
</div>请点击整页按钮
解决方案(全屏查看)
html, body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
}
body > ion-pane,
body > ion-pane > ion-content {
width: 100%;
height: 100%;
}
.app-background {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
z-index: -1;
}
.app-background > img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}<body ng-app="starter">
<ion-pane>
<head>
</head>
<ion-content>
<body>
<div class="app-background">
<img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">
</div>
</body>
</ion-content>
</ion-pane>
</body>请点击整页按钮
关于javascript - 背景图片占据整个屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39668016/