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

【问题标题】：Mobile Website Background Image not resizing移动网站背景图片未调整大小
【发布时间】：2019-02-07 15:18:44
【问题描述】：

这里很新，以前从未在此表格上询问过，所以请原谅我的任何困惑。我的背景图片有问题。它在我的 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，结果完全相同。这是图像大小问题吗？有没有一种方法可以让图像在屏幕上显示而没有空白且不会被截断？请帮我解决这个问题。

【问题讨论】：

标签： html css web mobile responsive-design

【解决方案1】：

尝试使用

background-size: 100% in your css i.e.

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% 适用于高度和宽度。

其他信息 如果你想修改其中任何一个，你可以尝试 background-size: 100% 50%;

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

【讨论】：

【解决方案2】：

使用代码如下：

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%;
    }

【讨论】：