<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?