CSS Body 图片在移动设备上会拉伸

Question

我有以下 CSS 脚本需要帮助。在 PC 上看起来还不错，但在移动设备上它就被拉长了。请问我可以添加什么来保持宽高比吗？

body {
    font-family: 'Open Sans', sans-serif;
    background:url(../images/bg.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: 100% 100%;
}

谢谢大家

罗布

Answer 1

如果您删除 background-size: 100% 100% 它应该适合您。

Fiddle: http://codepen.io/anon/pen/wGVJRg

Answer 2

这是因为您的代码中有 background-size: 100% 100%;。将其更改为 background-size: 100%。这可能有用。

Answer 3

如果您担心纵横比，最好使用 img 标签，图像标签的 css 将是

   img.background-image-holder{
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    }

这是一个有效的 link https://jsfiddle.net/t236ngep/

CSS Body 图片在移动设备上会拉伸

CSS Body Image stretches when on a mobile device

css

image

aspect-ratio