css - 有没有办法结合背景大小 :contain and :cover?

Question

我想同时使用background-size:contain 和background-size:cover。我想让我的背景图像始终拉伸(stretch)浏览器窗口的 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 为你。