Question

除非您100％确定，否则请不要将此标记为重复。

我需要一个图像作为背景图像，100％宽度和高度，没有裁剪。所以它应该拉伸/挤压然而适合屏幕。但是，我无法使用img标记，因为这会将图像放在我正在使用的其他背景之上，所以我必须使用背景css属性。

这是我用于css全屏幕背景图片的教程，似乎没有做我需要的：CSS tricks

以下是目前发生的事情的JSfiddle：JSfiddle

我相信这是相关代码，适用于包含背景图片的li：

.foo {
    display:block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;

    background: url("http://i.imgur.com/ZNoJHg1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

请注意，如果放大/缩小渲染区域，则显示的图像数量会发生变化。这就是我想要避免的。我愿意使用javascript或jquery来解决这个问题。

Answer 1

<!DOCTYPE html>
<html>
<head>
<style>
* {
  padding: 0;
  margin: 0;
}
.fit {
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() {
  var wh = $(window).height();
  $('body').height(wh); // body height = window height
}
$(document).ready(function() {
  set_body_height();
  $(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="http://i.imgur.com/ZNoJHg1.jpg" >    
</body>
</html>

尝试这个..似乎你的问题重复btw

Answer 2

添加background-size:100%;

或改变你的背景css，如下所示

background :url("http://i.imgur.com/ZNoJHg1.jpg") no-repeat fixed center center / 100% auto rgba(0, 0, 0, 0)

希望它能解决您的问题

Answer 3

此解决方案依赖于使用图像标记而非背景属性，而不是覆盖其他图像

<强> CSS

            html,body{height: 100%;}
            body{
                margin: 0;
                position: relative;
                padding:0;


            }
            .background{
                position: absolute;
                top: 0;
                left:0;
                z-index: 0;
            }
            .page-container
            {
                min-height: 100%;
                position: relative;
                z-index: 1;
            }

<强> HTML

<img class="background" src="http://i.imgur.com/ZNoJHg1.jpg" width="100%" height="100%" />
<div class="page-container">
    <img src="http://i.imgur.com/ZNoJHg1.jpg" width="500" height="500" />    
</div>

CSS - 完全没有裁剪的全屏背景图像

3 个答案: