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%;

拉伸CSS背景图片

2 个答案: