填充 DIV 不考虑纵横比答案

【问题标题】：Filling DIV regardless Aspect Ratio填充 DIV 不考虑纵横比
【发布时间】：2015-12-10 12:52:09
【问题描述】：

我想要实现的是用宽度和高度的图像填充 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 中的整个 slicklist。css 是否可能？我要生气了，请帮帮我！

【问题讨论】：

标签： css wordpress background-image fill background-size

【解决方案1】：

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

注意： 使用此方法会扭曲图像，这可能是您不想要的，但如果您想要一个带有模糊边框的白框，您可以仅使用 CSS 来实现，这样可以使角落保持美观，即使你调整大小。

更新：为下面接受的解决方案添加了 sn-p：

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>

【讨论】：

背景尺寸：100% 100%；不工作。宽度很好，而高度因纵横比而缩放。我现在将尝试使用 css 解决方案，而不是使用图像！
解决了直接用css创建模糊背景的问题。谢谢！

【解决方案2】：

如果背景尺寸：100% 100%；不起作用，那么您的 div 或容器元素可能没有您想象的那么大。也许您看到它是全尺寸的，因为您看到溢出超出了元素的边界。

见this page...背景大小：100% 100%；应该做你想做的。

【讨论】：