Question

我有一个background image which is getting scaled,，但问题是当看到较小的分辨率时，它会变得越来越难看。

.bcg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {background-image:url('../img/bcg_slide-1.png'); 
             background-size: 100% 100%}

HTML标记

        <section id="slide-1" class="homeSlide">
            <div class="bcg">
                <div class="hsContainer">
                    <div class="hsContent">
                        <h2>Hello1</h2>                         
                    </div>
                </div>
            </div>
        </section>

如果我使用background-size: 100% auto;，那么它不是perfectly fitting the entire window。是否有任何解决方案可以使div内的background-image完美适用于所有resolutions和sizes。

Answer 1

从幻灯片中删除背景大小，并让.bcg类的背景大小：cover有效。封面将保持纵横比，并调整图像大小，使其尽可能地覆盖整个区域。 Contain的工作方式类似，但调整大小以使其中一个维度涵盖整个区域。

Answer 2

background-position: contain;确实有用。但是，您需要稍微重新构建CSS，以使百分比正常工作。

html, body, #slide-1, .bcg {
    height: 100%;
}

#slide-1 .bcg {
    background: url('http://placekitten.com/g/1600/900') top center no-repeat; 
    background-size: contain;
}

http://jsfiddle.net/CPBy2/1/

或者如果你真的需要DIV按比例缩放16：9以便其他内容在页面上很好地流动，你也可以使用填充技巧。

#content {
    position: relative;
    background: url('http://placekitten.com/g/1600/900') top center no-repeat;
    background-size: contain;
}

#content:after {
    content: "";
    display: block;
    padding-top: 56.25%;
}

<div id="content"></div>Content after

http://jsfiddle.net/46A5R/

将图像缩放为16：9宽高比

2 个答案: