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中图像的宽度和高度

回答

相关问题