背景图像不能在较小的屏幕尺寸上缩放答案

【问题标题】：Background image not scaling on smaller screen size背景图像不能在较小的屏幕尺寸上缩放
【发布时间】：2018-05-30 07:06:06
【问题描述】：

我对这个前端的东西很陌生。我有一张图片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>

style.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%; }
}

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

【问题讨论】：

你想让你的背景全宽显示吗？因为智能手机是垂直的，所以如果你像在电脑上一样缩放它，背景会很小。

标签： html css twitter-bootstrap responsive-design background

【解决方案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;

 }

【讨论】：