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

Question

这里很新，从来没有问过这张表格，所以请原谅我的任何困惑。我遇到了背景图片的问题。它在我的电脑上看起来很好，或者当我把手机放在它的侧面并在风景中观看它时;然而，在纵向视图中，它正在被切断并且没有尺寸。我只能以底部的白色空间或被切断的图像为代价来显示完整的图像。我已经尝试过许多已在此处发布的解决方案无济于事。我在这里发布的三个最接近。

这些切断了图像的一半，但以纵向视图填充屏幕。但是，它们在景观视图中看起来很好。

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

使用以下代码：

See fiddle

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

尝试使用

background-size：你的css是100％ie

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

background-size：100％同时适用于高度和宽度。

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

你可以在这里阅读更多关于它的信息https://www.w3schools.com/cssref/css3_pr_background-size.asp