将图像缩放到 16:9 纵横比

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 起作用。 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/