移动网站背景图像未调整大小

Question

这里很新，以前从未问过这个表格，所以请原谅我的任何困惑。我在使用背景图像时遇到问题。它在我的 PC 上看起来不错，或者当我将手机侧翻并横向查看时;但是，它被切断了，并且在纵向视图中无法调整尺寸。我只能让它以底部的空白或图像被切断为代价来显示完整的图像。我已经尝试了许多已经发布在这里的解决方案，但无济于事。我在这里发布的三个是最接近的。

这些截断了一半的图像，但以纵向视图填充屏幕。但是，它们在横向视图中看起来不错。

body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: cover;
}

和

body {
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
}

这显示了完整的图像，但将屏幕的一半留空并横向爆炸

body{
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vw;   
overflow: hidden;
}

图像为 1920x1080。我还将图片大小调整为 321x174，结果完全相同。这是图像大小问题吗？有没有办法让图像在没有空白的情况下显示在屏幕上而不会被切断？请帮忙，我正在用这个抨击我的大脑。

Answer 1

使用如下代码：

见小提琴

body {
width: 100vw;
height: 100vh;
background: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

Answer 2

尝试使用

背景大小：在您的 CSS 中为 100%，即

body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: 100%;
}

背景大小：100% 适用于高度和宽度。

附加信息如果您想修改其中任何一个，您可以尝试背景大小：100% 50%;

您可以在此处阅读更多相关信息 https://www.w3schools.com/cssref/css3_pr_background-size.asp