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

使用以下代码：

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

尝试使用

背景尺寸：css中的100％，即

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

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

2 个答案: