伸展CSS背景圖像

可能是一個但不尋常的 - 我期待在CSS拉伸背景圖像覆蓋整個div。我不希望任何圖像被裁剪（所以不能像我目前使用的那樣使用cover） - 我希望背景圖像扭曲以填充div，而不管div的大小/長寬比如何。伸展CSS背景圖像

我有一個在這裏codepen：http://codepen.io/mikehdesign/pen/ezOrmB

我當前的代碼是：

HTML：

<div class="background"></div>

CSS：

div.background { 
    width: 100%; 
    height: 200px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    background-image: url(https://unsplash.it/800/400); 
}

理想我想這樣做沒有Javascript

來源

2016-05-26 Mike Harrison

確定，但隨後其得到拉伸不按比例：

div.background { 
    width: 300px; 
    height: 500px; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    background-position: center; 
    background-image: url(https://unsplash.it/800/400); 
}

歡呼

來源

2016-05-26 09:46:23 trajo

據我理解這就是他想要 – hypeJunction

什麼是的，當我寫這篇文章時，我沒有看到你的評論 - 你完全正確！ – trajo

設置你的背景大小爲100％兩個維度：

background-size: 100% 100%;

來源

2016-05-26 09:45:14 hypeJunction

伸展CSS背景圖像

回答

相關問題