Question

我知道这个问题在这里经常被问到，但现有的解决方案都没有让我感到满意。我有一个带有装饰性色带的水平空块，我必须水平拉伸以填充整个视口。

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 问题是我必须水平拉伸它而不改变垂直比例或移动图像。我也想使用相对位置，以便不拧上面的块，所以我不能使用绝对位置的巨大高度值。我尝试用background-size属性解决问题，但是图像只是沿着对角线方向移出块边界，每当我不增加高度值时它就不可见。

＆＃13;

	background-size: 100% 100%;

＆＃13;

＆＃13; 这个也没有帮助我 - 它水平拉伸图像并与导航栏保持一定比例，但是垂直地挤压它，我必须保持高度 - 只是水平拉伸。任何帮助将不胜感激。

P.S。哪个属性/值构成一个没有内容的块，只是窗口上出现了背景图像？

Answer 1

根据我的理解，您想要做的只是将图像拉伸到两侧，但保持原始高度，对吗？

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

background-size: 100% 15px;

从这个小提琴https://jsfiddle.net/o3czsv9b/2/可以看出，画面被拉伸到两侧，但保持它的高度。这让它看起来很压扁。

从你的图片名称来看，它听起来像是在尝试放置一条线条。如果你想扩展一些东西，有时候

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

可以给你想要的结果。这取决于你的形象。看看这个小提琴：https://jsfiddle.net/o3czsv9b/1/

在CSS

1 个答案: