Question

一旦我达到平板电脑/移动设备尺寸，我将从100％的桌面背景移动并更改为移动设备背景。我的问题是随着我的大小下降，内容开始超过背景长度。

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

然后去992px。此图像宽度为992像素，高度为1425像素

#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图像吗？

Answer 1

我相信您正在寻找cover或contain的背景尺寸。 MDN在此处有更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

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

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

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

Answer 2

我不安静得到你想要实现的目标，你可能想看看这个 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种不同的适当大小的图像。不是因为图像不会缩放，而是为较小的设备节省带宽。

CSS Background Naturaly Scaling内容

2 个答案: