填充 DIV，无论纵横比如何

Question

我想要实现的是用图像的宽度和高度填充 div。我得到的是对宽度的控制，但高度将尊重宽高比而不填充 div 高度。尝试过 background-size: cover 和 contain 在每一种可能的组合中，但我真正可以在不裁剪的情况下覆盖的只是宽度。我不能给出绝对大小（以像素为单位），因为我的页面是响应式的。

.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 px) 覆盖图 2 中的整个 slicklist。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...背景大小：100% 100%；应该做你想做的事。

填充 DIV，无论纵横比如何

Filling DIV regardless Aspect Ratio

css

wordpress

background-image

fill

background-size