html - 在CSS中水平拉伸(stretch)背景图像

Question

我知道这个问题在这里经常被问到，但是现有的解决方案都没有解决我的问题。我有一个带有装饰丝带的水平空 block ，我必须水平拉伸(stretch)它以填充整个视口(viewport)。

#upper-line {
	background: url(../images/upper-line.png) no-repeat;
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 133px;
	background-size: cover;
}

  <div class="container-fluid">
        <div id="upper-line"></div>
  </div>

问题是我必须只水平拉伸(stretch)它而不改变垂直比例或移动图像。我还想使用相对位置，以免破坏上面的 block ，所以我不能使用绝对位置的巨大高度值。我正在尝试使用 background-size 属性解决问题，但图像只是沿对 Angular 线方向移出 block 边界，只要我不增加高度值，它就看不到。

	background-size: 100% 100%;

这对我也没有帮助 - 它水平拉伸(stretch)图像并与导航栏保持比例但垂直挤压它，我必须保持高度 - 只是水平拉伸(stretch)。 任何帮助将不胜感激。

附言哪些属性/值使 block 没有内容，只有背景图像出现在窗口上？

Answer 1

据我了解，您要做的只是将图像向两侧拉伸(stretch)，但保持原始高度，对吗？

我假设您知道图像的高度。对于此示例，我们将使用高度为 15 像素的图像。 然后你可以使用:

background-size: 100% 15px;

在这个 fiddle 中可以看出 https://jsfiddle.net/o3czsv9b/2/图片被拉伸(stretch)到两侧，但保持高度。这使它看起来被压扁了。

---

从您的图片名称来看，您似乎在尝试放置一条线的图片。如果你想向侧面延伸一些东西，有时

background-repeat-x: repeat;
background-repeat-y: no-repeat;

可以给你想要的结果。不过这取决于你的形象。 看看这个 fiddle :https://jsfiddle.net/o3czsv9b/1/