html - CSS 背景自然缩放内容

Question

我从 100% 的桌面背景移动到平板电脑/手机尺寸后更改为移动背景。我的问题是当我缩小尺寸时，内容开始超过背景长度。

#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 -->

我不明白为什么它能够缩放并保留内容直到它变小(例如移动尺寸)

我错过了什么？我不想拉伸(stretch)图像。我想保持正确的比例。我只需要一张更高的背景图片吗？

Answer 1

我相信您正在寻找 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%;
}