代码之家 › 专栏 › 技术社区 › Nauman Zafar

背景图像不能在较小的屏幕上缩放

background responsive-design twitter-bootstrap css html

Nauman Zafar · 技术社区 · 6 年前

我对这种前端产品还很陌生。我有个形象 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>

样式表

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

但是这个解决方案不起作用。我还有什么其他选项可以用屏幕大小缩放背景?

1 回复 | 直到 6 年前

Firefly 6 年前

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

如果你想保留 盖 对于较大的屏幕,您可以更改 盖 到 包含 仅在您的查询中。

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

 }

推荐文章

Softly · 单选按钮未按预期取值

1 年前