CSS-完全不裁剪的全屏背景圖像

Question

除非您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來解決此問題。

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>

嘗試這個..似乎你的問題重復順便說一句

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 個解決方案

解決方案1
1 已采納 2014-03-07 02:54:38

解決方案2
-1 2014-03-07 03:16:45

解決方案3
-2 2014-03-07 02:44:04

CSS-完全不裁剪的全屏背景圖像

問題描述

3 個解決方案

解決方案1 1 已采納 2014-03-07 02:54:38

解決方案2 -1 2014-03-07 03:16:45

解決方案3 -2 2014-03-07 02:44:04

解決方案1
1 已采納 2014-03-07 02:54:38

解決方案2
-1 2014-03-07 03:16:45

解決方案3
-2 2014-03-07 02:44:04