获得背景图片或文字填充宽度，不重复，但不垂直拉伸

Question

正如标题所述。我如何获得背景图像，甚至是文字来填充宽度，而不是垂直拉伸/挤压，只显示一次？我似乎无法弄清楚这一点。谢谢。

编辑：我也希望高度按比例缩放图片的宽度，所以它不会歪斜，但随着宽度缩放。

Answer 1

为身体使用CSS：

body {background-repeat: no-repeat; 
     background-size: 100%;} 

Answer 2

为了填补宽度方向，使用的背景大小“。这允许您按此顺序输入两个参数 - 宽度和高度。使用“100％”填充宽度，然后使用固定的高度值（假设您知道图像的高度）。

E.g.如果您的背景图片高度为500px，则：

{ 
    background-size:100% 500px; 
    background-repeat: no-repeat; 
} 

您可以自己试验here。

Answer 3

如果只想背景IMG填补宽度没有考虑到的高度，你可以这样做：

.element-with-back-img{ 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

但这个IMG不填充元素与-背的高度IMG因为高度将设置为“自动”

通过这样做：

.element-with-back-img{ 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 

的IMG充满高度，但如果元素与回-IMG具有比来回不同比例米IMG，这人会改变它的比例，以填补元素与回-IMG

我建议u到：

.element-with-back-img{ 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

这种规模的背景图像，以尽可能大，使得背景区域完全被背景图像覆盖。背景图像的某些部分可能无法在背景设定区域

我希望观内，这可能帮助ü

.test { 
 
    background-image: url(http://placekitten.com/1000/750); 
 
    background-size: 100%; 
 
    background-repeat: no-repeat; 
 
    background-color: lightblue; 
 
    height: 150px; 
 
    display: inline-block; 
 
} 
 

 
#test1 { 
 
    width: 200px; 
 
} 
 
#test2 { 
 
    width: 100px; 
 
} 
 
#test3 { 
 
    width: 300px; 
 
} 
 
.test:hover { 
 
    background-position: center center; 
 
}

<div class="test" id="test1"></div> 
 
<div class="test" id="test2"></div> 
 
<div class="test" id="test3"></div>