Question

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

现在，我将图像的宽度限制在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;

我将如何做到这一点？

Answer 1

添加：

background-size: cover;

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