DIV height接受内部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-->

The problem is in the Internet Explorer (even IE 10) <div class="background"> takes the aspect height of the image, even I set height , max-height with overflow: hidden .

In Google Chrome, Firefox there is no problem. On inspecting in IE I find IE adds inline style with height of the image to the <div> . How to resolve this issue?

Answer 1

I'm guessing your trying to achieve full screen backgrounds, if you are your code is quite far from being complete and working in all instances and browsers.

I think your code may not be working due to the missing closing tag on your img />

Id suggest you take a look at the following code found on 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')";

}

Answer 2

In my opinion thеse lines are unpredictable

$(document).ready(function(e){  
       var dheight=$(document).innerHeight();

When you deal with images since their height is yet unavailable you should wait for them to load.

$(window).on('load',fumction(){
   var dheight=$(document).innerHeight();
   ...
})

Is the better option