css - 如果页面宽度超过图像宽度，如何使横幅图像拉伸以适合页面宽度？

Question

最佳可见：http: //blurrapp.com

（这是大的绿色横幅图像。）

现在我将图像的宽度限制为 2560 像素，直到 4k 革命到来之前应该没问题。但是，如果有人出于某种原因（在多台显示器上？）确实将其拉伸得更宽，我希望它不会像现在这样重复，而是拉伸图像的宽度以适应。

这可以通过 CSS 完成而不需要 JavaScript 吗？

我的 SASS 的那部分看起来像这样：

.banner {
    @include box-shadow(rgba(0, 0, 0, 0.30) 0 4px 10px 0);
    background: url(../images/banner-bg.jpg);
    height: 522px;

我将如何做到这一点？

score 3 · Accepted Answer

添加：

background-size: cover;

这确保了图像将覆盖整个区域，在您的情况下，图像几乎总是保持其高度，直到横幅的宽度变得大于图像的原始宽度，然后它将开始扩大尺寸以适应宽度. 如果有人将他们的浏览器扩展到这个大小，它看起来并不完美，但无论如何在这个宽度上不会有太多。

1 回答 1