html - 背景图像在较小的屏幕尺寸上不缩放

Question

我对这个前端的东西很陌生。我有一张图像 1200 * 900 px，我将其用作横幅的背景。图像在大屏幕上看起来不错，但当我从响应式设计模式切换到 Apple iPhone 6S 时。背景从侧面被切断。如何在较小尺寸的情况下保留完整图像。

index.html

<div class="container-fluid banner">
       <div class="row">
            <div class="col-md-8 content">
               <h1>TThis is a banner image.</h1>
               <p>Banner image is the main image we use on our web pages showing what your page is all about.</p>
             </div><!--/.col-->
        </div>
</div>

样式.css

.banner {
    background: url(banner.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 680px;
    position: relative; 
}

我尝试过的一些解决方案是使用媒体查询在较小的屏幕尺寸上设置 max-width: 100%

@media (max-width: 768px) {
    .banner{ max-width: 100%; }
}

但是这个解决方案行不通。我还有哪些其他选项可以根据屏幕尺寸缩放此背景？

Answer 1

如果你想显示完整的图片，你应该使用contain而不是cover。

如果您想为更大的屏幕保留 cover，您可以将 cover 更改为仅在查询中包含 contain。

@media (max-width: 768px) { 
    -webkit-background-size: contain;
     -moz-background-size: contain;
     -o-background-size: contain;
     background-size: contain;

 }