无论纵横比如何，都可以填充DIV

Question

我想要实现的是用宽度和高度的图像填充div。我得到的是控制宽度，但高度将尊重纵横比而不填充高度div。尝试背景大小：覆盖并包含在每个可能的组合，但我可以真正覆盖而不裁剪只是宽度。 我不能给出像素的绝对大小，因为我的页面是响应式的。

.slick-list {
   background-image: url(http://lace.x10host.com/wp-content/uploads/2015/11/slicklist.png);
   background-size: 100%, cover;
   background-repeat: no-repeat;
}

我真正需要的是使图像1中的白色条纹（1440 x 76像素）覆盖图像2中的整个光滑列表。是否可以使用css？ 我生气了，请帮帮我吧！

Answer 1

您是否尝试background-size: 100% 100%;在div中水平和垂直拉伸图像？

注意：使用此方法会扭曲您可能不想要的图像，但如果您想要一个带有模糊边框的白色框，则只能使用CSS来实现，即使你调整大小。

更新：为以下接受的解决方案添加了摘录：

div#x {
  background: #000;
  padding: 10px;
}
div#shadow {
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 5px #fff;
}

<div id="x">
  <div id="shadow"></div>
</div>

Answer 2

如果背景大小：100％100％;那么你的div或容器元素可能不像你想象的那么大。也许你看到它的全尺寸，因为你看到溢出超出了元素的界限。

见this page ... background-size：100％100％;应该做你想做的事。