拉伸 CSS 背景图像

Question

可能是一个但不寻常的 - 我希望在 css 中拉伸背景图像以覆盖整个 div。我不希望任何图像被裁剪（所以不能像我目前使用的那样使用cover） - 无论 div 的大小/纵横比如何，我都希望背景图像变形以填充 div。

我这里有一个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 的情况下这样做

Answer 1

好的，但是它的拉伸不成比例：

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);
}

干杯

Answer 2

将两个尺寸的背景尺寸设置为 100%：

background-size: 100% 100%;