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

Question

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

Here is a perfect example of what I'm trying to do

有没有纯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 文件中。

其次，需要给.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。