jquery - DIV高度取里面img的高度，而不是用CSS设置的高度

Question

<script type="text/javascript">  
    $(document).ready(function(e){  
       var dheight=$(document).innerHeight();  
       $(".background").css({  
          "height": dheight,  
          "overflow":"hidden"  
       });  
    });  
</script>

<section id="box">
    <section class="heading">
        <div class="head">SiteName</div>
    </section>
    <!--heading-->
    <div class="background">
        <img src="images/hdimage.jpg" width="100%" />
    </div>
    <!--background-->
</section>
<!--box-->

问题出在 Internet Explorer(甚至 IE 10)<div class="background">采用图像的纵横比高度，即使我设置了 height , max-height与 overflow: hidden .

在谷歌浏览器、火狐中没有问题。在 IE 中检查时，我发现 IE 将带有图像高度的内联样式添加到 <div> .如何解决这个问题？

Answer 1

我猜你试图实现全屏背景，如果你是你的代码还远未完成并在所有实例和浏览器中工作。

我认为您的代码可能无法正常工作，因为您的 img />

上缺少结束标记

我建议您看一下在 this article 上找到的以下代码

.background{

         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;
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

}