Question

我需要将图像背景设置为与屏幕一样宽，并保持原始width:height比率。这是我的代码：

        var wechatStyle
            = 'body {'
                // + 'background: url(wechat.jpg) no-repeat center top fixed; '
                + 'background-image: url(wechat.jpg); '
                + 'background-position: center top; '
                + 'background-repeat: no-repeat; '
                + 'background-size: cover; '
            + '}'

结果是，背景宽度正确，但高度被裁剪。但我希望能够向下滚动以查看整个图像。我怎样才能做到这一点？

编辑：

我已尝试contain而不是cover，但如果我使用contain

，宽度将不再与屏幕宽度相同

编辑2：

我正在关注这个问题。但种植结果并不好。 CSS background image to fit width, height should auto-scale in proportion

Answer 1

您可能被链接的问题误导了。这可以像放置<img>那样简单，并像这样设计样式：

        var wechatStyle
            = 'img {'
                + 'width: 100vw; '
                + 'height: auto; '
            + '}'

CSS如何使背景图像“可滚动”而不是被屏幕切割

1 个答案: