伸展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背景图像

回答

相关问题