CSS背景自然缩放内容

我正在从100％的桌面背景移动，并且一旦我点击平板电脑/手机尺寸就更改为移动背景。我的问题是，随着我的规模缩小，内容开始超过背景长度。CSS背景自然缩放内容

#bg { 
background-image: url('images/bg.gif'); 
background-size: 100% ;    
background-repeat: no-repeat;  
position: relative; 
height: 100%; 
}

然后去992px。此图片是992px宽，1425px高度

#bg { 
background-image: url('images/mobile/mobile-bg.jpg'); 
background-size: 100% auto; 
}

HTML结构

<div class="row main-content" > 
    <div class="col-xs-12" id="bg"> 
     <div class="row"> 
      <div class="col-xs-12 "> 
       <div class="row"> 
        <!-- content here --> 
       </div> 

      </div> 
     </div> 
    </div> 
</div> <!-- row main-content end -->

我不明白为什么它能够扩展并保持内容，直到它变得更小（例如，移动的大小）

我错过了什么？我不想拉伸图像。我想保持正确的比例。我只需要一个更高的bg图像吗？

来源

2014-09-02 Clam

尝试用'container' div封装'main-content' div。 – Oriol 2014-09-02 23:09:17

它周围有一个容器。我没有将它包含在 – Clam 2014-09-02 23:26:36

我相信你正在寻找cover或contain的背景大小。 MDN有更多在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Cover会使背景图片尽可能小，同时保持纵横比和contain将确保背景图像，同时保持率尽可能的大。

如果您需要支持低于版本9的IE，您需要某种polyfill。

#bg { 
    background-image: url('images/bg.gif'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    position: relative; 
    height: 100%; 
}

来源

2014-09-02 23:06:51 Anton

的例子中，似乎是一个改进。我最终在背景的右边缘留出空间..不知道为什么......就好像它没有覆盖宽度的100％ – Clam 2014-09-02 23:24:24

你有网上的例子吗？ MDN链接到这里的一个例子：http://whereswalden.com/files/mozilla/background-size/page-cover.html使用封面，并没有利润率，但分辨率确实有点粗糙。检查你有图像的股利没有一个边缘或填充导致问题，甚至容纳该div的容器。 – Anton 2014-09-03 00:29:36

我不安静究竟得到了什么你你试着实现可能要看看这个 http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

可能这是你想要的，因为它会根据设备扩展和裁剪图片尺寸。

.bg{ 
    background:url(imgurl/picture.jpg) no-repeat center center; 
    background-size: cover; 
}

这就是我个人的用法。最有可能在手机，大型平板电脑，大型桌面媒体查询中使用3种不同尺寸的适当图像。不是因为图像不会缩放，而是为较小的设备节省带宽。

来源

2014-09-02 23:17:29 user1452407

为什么封面然后在右侧创建空间是有原因的。它粘在屏幕的左侧，但似乎没有达到100％的宽度 – Clam 2014-09-02 23:27:18

是的，默认情况下在左侧和右侧都有空白。如果你删除它们，它应该使空间消失。 – user1452407 2014-09-02 23:29:30

好吧，它不是完美的，因为封面看起来像切断双方，因为它达到了最小的浏览器宽度。我想这是最好的，它可以做的水库 – Clam 2014-09-03 00:12:19

CSS背景自然缩放内容

回答

相关问题