CSS Körper Bild erstreckt sich, wenn auf einem mobilen Gerät

Question

Ich habe das folgende CSS-Skript, dass ich gerne mit helfen würde. Wenn es auf einem PC ist sieht es gut aus, aber wenn es auf einem mobilen Gerät ist, wird es gestreckt. Kann ich etwas hinzufügen, um das Seitenverhältnis beizubehalten?

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

Dank all

Rob

Answer 1

Wenn Sie background-size: 100% 100% entfernen sollte es für Sie arbeiten.

Fiddle:

Answer 2

Sein wegen background-size: 100% 100%; in Ihrem Code. ändern Sie es zu background-size: 100%. das könnte funktionieren.

Answer 3

Wenn Sie besorgt über Seitenverhältnis sind, ist es immer vorzuziehen img-Tag, und die CSS für Image-Tag sein würde

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

hier zu verwenden, ist ein Arbeits Link https://jsfiddle.net/t236ngep/