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

請不要將此標記爲重複，除非您100％確定。CSS - 完全不裁剪的全屏幕背景圖像

我需要一個圖像作爲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; 
}

請注意，如果你放大/使呈現面積小，圖像顯示茶量nges。這是我想要避免的。我願意使用JavaScript或jQuery來解決這個問題。

來源

2014-03-07 John Doe

你jfiddle是不是有 – helderdarocha

@helderdarocha呀，修正了這一點。 –

不'背景大小：100％;'解決你的問題？ – helderdarocha

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

來源

2014-03-07 02:54:38 airi

不是，圖像在調整大小時仍會裁剪。 –

可以讓它變大一些，從右到左調整它在那個小提琴上 – airi

現在這正是我正在尋找的東西，謝謝！ –

-2

這個解決方案取決於使用圖像標籤不background屬性，它不覆蓋其它圖像

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>

來源

2014-03-07 02:44:04 Reda

從我的帖子：「我無法使用img標籤，因爲這將圖像放在我正在使用的其他背景上，所以我必須使用背景CSS屬性「。 –

你可以使用幾個背景圖像標籤與不同的z-index值 – Reda

我試過這個。即使將img標籤設置爲z-index -999，也不會將它們放在背景顏色和其他背景圖像之後。 –

-1

添加background-size:100%;

或改變你的背景CSS像下面

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

希望它會解決你的問題

來源

2014-03-07 03:16:45 Sarath

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

回答

相關問題