獲得背景圖片或文字填充寬度，不重複，但不垂直拉伸

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>