如果页面宽度超过图像宽度，如何使横幅图像拉伸以适应页面宽度？答案

【问题标题】：How do I make my banner image stretch to fit the width of the page if the page width exceeds image width?如果页面宽度超过图像宽度，如何使横幅图像拉伸以适应页面宽度？
【发布时间】：2013-07-19 09:01:06
【问题描述】：

此处最显眼：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;

我将如何做到这一点？

【问题讨论】：

标签： css sass compass-sass

【解决方案1】：

添加：

background-size: cover;

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

http://www.css3.info/preview/background-size/

【讨论】：