如何縮放背景圖像以覆蓋，乘以額外的比例因子？

我有一個背景圖片，我想用這個元素來覆蓋，使用background-size: cover;但是，我也想在兩個方向上將它縮小110％，超出cover所做的，這樣我就可以隨後移動它與background-position。如何縮放背景圖像以覆蓋，乘以額外的比例因子？

換句話說，我想background-size: cover對待周圍的div，就好像它在兩個方向上都增大了110％。

有沒有一種方法可以純粹在CSS中完成此操作？

如果我理解正確的話，這將是一個辦法做到這一點，但max()不是標準的CSS3：

background-size: max(auto 110%) max(auto 110%);

來源

2015-12-02 ptomato

你想要圖像佔據整個屏幕？恩。 100％的寬度和高度？ – Matthew

我創建了一個Fiddle給你看看。我相信我正確理解了這個問題，但請讓我知道我是否脫離基地。

我包已在另一個DIV像這樣的background-image股利：

<div class="hero-container"> 
    <div class="row" id="hero"></div> 
</div>

和應用，像這樣的樣式：

.hero-container { 
    overflow: hidden; 
    width: 100%; 
    height: 100vh; 
} 
#hero { 
    background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: relative; 
    width: 100%; 
    height: 110vh; 
    margin-bottom: 0px; 
    right: 0; 
}

玩弄小提琴通過改變height: 110vh，讓我知道這是你在找什麼，或者如果我至少在正確的軌道上。

希望這會有所幫助！

編輯*：我刪除了過渡和填充，因爲這些都沒有必要。

如果您想要對具有固定高度的容器執行此操作，您可以將.hero-container高度更改爲500px或其他東西，然後在#hero div的高度上使用110％而不是110vh。

來源

2015-12-02 20:35:12 Matthew

我分叉你的小提琴，並與它一起玩：http://jsfiddle.net/tq2mn8ad/我認爲這是獲得我想要的最簡單的方法。我希望沒有額外的div，但如果沒有人提出更好的答案，我會給你複選標記。 – ptomato

我很高興我能幫助至少一點點。我只是發現，這樣做會是兼容的，並且仍然非常簡單。 – Matthew

如何縮放背景圖像以覆蓋，乘以額外的比例因子？

回答

相關問題