獲取背景圖像或文本以填充寬度，不重復，但不垂直拉伸

Question

正如標題所說。 如何獲得背景圖像，甚至是文本來沿寬度方向填充寬度，而不是垂直拉伸/擠壓，僅顯示一次？ 我似乎無法弄清楚。 謝謝。

編輯：我也希望高度與圖片的寬度成比例地縮放，因此它不會偏斜，而是與寬度成比例。

Answer 1

如果僅希望背景img填充寬度而不考慮高度，則可以執行以下操作：

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

但與此同時，img不會填充element-with-back-img的高度，因為該高度將設置為“自動”

通過做這個：

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

img填充高度，但如果element-with-back-img與img的比例不同，則此比例將更改其比例以填充element-with-back-img

我建議您：

.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> 

Answer 2

使用CSS作為主體：

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

Answer 3

要沿寬度方向填充，請使用“背景尺寸”。 這樣您就可以按此順序輸入兩個參數-寬度和高度。 使用“ 100％”填充寬度，然后使用固定的高度值（假設您知道圖像的高度是多少）。

例如，如果您的背景圖片高為500px，則：

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

您可以在這里為自己做實驗。