纵向拉伸背景图片

Question

我正在尝试弄清楚如何在垂直方向上拉伸背景图片。我正在使用CSS3和以下三张图片：

background-image: url("left.png"), url("right.png"), url("center.png")
background-repeat: no-repeat, no-repeat, repeat-x
background-position: top left, top right, top

现在我想将这些图像垂直拉伸，以便它们延伸到底部。有没有办法可以做到这一点？

- user1539137

---

我不这么认为。但是您可以调整（拉伸/缩放）<img>标签的大小：解决方案可能涉及将<img>放置在背景中，绝对定位等。 - KRyan

这可能是一个不错的查找位置：https://dev59.com/IXM_5IYBdhLWcg3w9oWG - MikeB

此外，我相信你不应该像那样在你的 url 周围加上引号。 - KRyan

Answer 1

我来晚了，但这是对我有用的方法：

background-size: auto 100%;

这将垂直适应图像，并让宽度按需处理（我认为默认情况下会重复）。你还可以设置：

background-repeat: no-repeat;

为了使图像不在水平方向重复。

- mr_mariusz

---

我还需要设置 background-position: center;。 - KIC

background-size: cover; 值得探索。 - nu everest

Answer 2

尝试：

background-size: 100% 100%;

第一个100%是用于宽度，第二个则用于高度。在您的情况下，您需要将第二个设置为100%。

- Erind Dollaku

---

我该如何将高度设置为100%？如果我使用background-size: 100%，它会将宽度和高度都设置为100%。 - user1539137

这相当方便。在我的情况下，我设置了“background-size: 960px 100%;”以获得所需的效果。 - Jason Champion

Answer 3

谢谢你提出这个问题。以下是对我有用的内容。

background-size: cover;
background-color: #a8dadc;
background-repeat: no-repeat;
background-size: 100vw 100vh;

- Nadine Amanda