divs中圖像的寬度和高度

Question

所以我需要一些幫助。

我做了這個設置是我需要一些圖像來總是全屏幕（縮放到適合）div放在裏面。這是我到底有多遠，無論我做什麼，我都無法讓它工作。我真的希望有人能幫我解決這個問題，這讓我瘋狂！我試圖把這樣的代碼

background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

但是然後圖像消失......這裏是整個代碼。

HTML

<div class="wrapper"> 
    <div class="navigation_top"> 
    <ul> 
     <li>Btn_1</li> 
     <li>Btn_2</li> 
     <li>Btn_3</li> 
     <li>Btn_4</li> 
     <li>Btn_5</li> 
    </ul> 
    </div> 

    <div class="navigation_side"> 
     <ul>   
      <li><a href="#slice1" id="btn_1" class="anchorLink">slice1</a></li> 
      <li><a href="#slice2" id="btn_2" class="anchorLink">slice2</a></li> 
      <li><a href="#slice3" id="btn_3" class="anchorLink">slice3</a></li> 
      <li><a href="#slice4" id="btn_4" class="anchorLink">slice4</a></li> 
      <li><a href="#slice5" id="btn_5" class="anchorLink">slice5</a></li> 
     </ul> 
    </div> 

    <div id="slice1"></div> 
    <div id="slice2"></div> 
    <div id="slice3"></div> 
    <div id="slice4"></div> 
    <div id="slice5"></div> 
</div> 

CSS

html, body {height:100%; color:#FFF;} 

ul, ol, li {margin:0px!important; padding:0px!important;} 

.wrapper {width:100%; height:100%;} 
.navigation_top {width:100%; height:50px; line-height:50px; background-color:#000; opacity:.5; position:fixed;} 
.navigation_top ul {list-style:none;} 
.navigation_top ul li {float:left; width:100px; text-align:center;} 
.navigation_top ul li a {display:block; color:#FFF; text-decoration:none;} 



.navigation_side {width:200px; height:auto; position:fixed; background-color:#000; opacity:.5; margin-top:10%;} 
.navigation_side ul li a {color:#FFF; text-decoration:none;} 


#slice1 {width:100%; height:100%; background:url(http://img405.imageshack.us/img405/6018/image1uii.jpg);} 
#slice2 {width:100%; height:100%; background-color:#999;} 
#slice3 {width:100%; height:100%; background-color:#888;} 
#slice4 {width:100%; height:100%; background-color:#777;} 
#slice5 {width:100%; height:100%; background-color:#666;} 

JQUERY

jQuery(document).ready(function($) { 

    $(".anchorLink").click(function(event){   
     event.preventDefault(); 
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
    }); 

    $('.navigation_top').hide(); 

    $(window).scroll(function() { 
     // the 10 below is the number of pixels down to show the menu 
     if ($(this).scrollTop() > 10) $('.navigation_top').show(); 
     else $('.navigation_top').hide(); 
    }); 
}); 

而且這裏是我的p的小提琴rogress：http://jsfiddle.net/iBertel/qLTQ9/

Answer 1

您確定這是適合屏幕的最佳方式嗎？只是因爲關於圖像分辨率的問題，我會有點不同。

我會這樣做的方式是我首先檢查屏幕的寬度/高度。然後我將它與圖像的寬度/高度進行比較。然後，如果圖像大於屏幕，我會壓縮它，這將允許我將它安裝到屏幕上。

如果圖像比屏幕小，那麼我將圖像居中在div中，並將div背景的顏色設置爲不錯的（例如，如果它匹配您的網站顏色，請確保它是黑色的div ）。

請記住，你必須檢查你的圖像的寬度/高度相對於屏幕。例如，如果圖像對於屏幕來說太寬，但不是那麼高，那麼圖像應該按照寬高比進行縮小，因此它將在div內顯示爲水平矩形。這樣你的圖片不會被扭曲。