divs中圖像的寬度和高度

我做了這個設置是我需要一些圖像來總是全屏幕（縮放到適合）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/

來源

2012-11-15 Bertel

你試圖將「全屏」圖像設置爲哪個元素？你不會把它分配給CSS中的任何東西。 – Lowkase

每一個切片都需要自己的「全屏」圖像，現在只是第一個圖像和休息的顏色 - 最終他們將有自己的圖片，應該填寫該分區...希望你明白我的意思？編輯：基本上它應該是現在的顏色，而不是切片中的不同顏色它應該是圖片。 – Bertel

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

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

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

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

來源

2012-11-15 17:44:29 Greeso

請記住，我需要5個div中的每個div的全尺寸圖像。它不可能使我加載到DIV內部的圖像適合DIVS大小（寬度：100％高度：100％？）問題是我有5個div應該在彼此之下，每個div都有自己的圖像和它需要具有響應能力，因此無論瀏覽器的大小如何，它都應該適合這種觀點。也即時通訊不如jQuery的強大。我真的需要som的幫助。 – Bertel

相同的概念只是稍加修改。你找到你的屏幕的大小，然後計算你的div的大小。基於此，您可以對圖像進行計算。請記住，您應始終計算圖像的寬高比。你說你對jQuery不太瞭解，這是你學習的完美項目。 – Greeso

確實 - 只是我明天需要這樣做:)無論如何，如果你看到這個鏈接：http：//www.adidas。dk/- 你看到頂部的滑塊，那就是我需要的，然後在對方下面。你有時間幫忙嗎？編輯：其實我不需要是100％的高度，只是100％的寬度，因爲...也許這會讓它更容易。 – Bertel

divs中圖像的寬度和高度

回答

相關問題