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 。

有没有办法结合background-size：contains和：cover？

1 个答案: