除非您 100% 确定，否则请不要将其标记为重复。
我需要一张图像作为背景图像，其宽度和高度为 100%，没有裁剪。所以它应该拉伸(stretch)/挤压以适合屏幕。但是，我无法为此使用 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 来解决这个问题。
最佳答案
<!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>
试试这个..顺便说一句，你的问题似乎重复了
关于javascript - CSS - 完全不裁剪的全屏背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22240330/