css - 有没有办法结合背景大小：包含和：覆盖？

Question

我想同时使用background-size:contain和background-size:cover。我想让我的背景图像始终拉伸浏览器窗口的 100% 宽度 x 100% 高度，同时保持图像的比例。

这是我正在尝试做的一个完美的例子

有没有纯css路线来实现这一点？

这是我的代码：

<div class="page-section clear">
     <div class="landing_photo clear" style="background-image:url('<?php echo get_template_directory_uri(); ?>/img/tempory_landing.png');">

    </div>
</div>

.page-section {
    width:100%;
    height:100%;
    margin:auto;
}
.landing_photo {
    width:100%;
    height:100%;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
}

Answer 1

内联样式不是很好，所以首先我会将您的图像url放入 CSS 文件中。

其次，您需要为 height 和 width 分配一个固定值.landing_photo。

这是用于实现您想要的结果的 CSS：

.page-section {
    width:100%;
    height:100%;
    margin:auto;
}
.landing_photo {
    width:500px;
    height:500px;
    background-position:100% 100%;
    background-repeat:no-repeat;
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
}

和标记

<div class="page-section clear">
    <div class="landing_photo clear"></div>
</div>

我为您创建了一个DEMO。