CSS-完全不会裁剪的全屏背景图片

John doe 发表于 Dev

约翰·杜

除非您100％确信，否则请勿将其标记为重复。

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

这是我用于css全屏背景图像的教程，似乎并没有满足我的要求：CSS技巧

这里是什么是目前存在的一个的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来解决此问题。

艾里

<!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>