Can someone help me figure out how to center a resized image within its container, which should also be centered? I've been struggling with this for 7 hours and can't seem to get it right. Any assistance would be greatly appreciated :-)
Here is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function imageresize() {
var conHeight = ($(window).height())* 0.56;
$(".resize").css({'height' : conHeight + 'px'}); // set large-image container to 56% of window height
}
$(document).ready(function() {
imageresize();
});
$(window).resize(function() {
imageresize();
});
</script>
</head>
<body>
<div id="navigation-area">
<div id="navigation">
</div>
</div>
<div id="set-overflow">
<div class="resize" id="large-image">
<img src="images/bg-home.jpg" class="resize">
</div>
</div>
</body>
</html>
This is the css code:
/*------------------------------*/
* {
margin: 0;
padding: 0;
}
#navigation {
width:990px;
border:1px solid green;
margin:23px auto;
height:42px;
}
#navigation-area {
width:100%;
height:135px;
background:url(images/bg-navigation.png) top center no-repeat;
overflow:hidden;
position:absolute;
top:-3px;
left:50%;
margin-left:-50%;
z-index:50;
}
#large-image {
width:1970px;
position:absolute;
margin-left:-985px;
left:50%;top:0;
z-index:40;
display:block;
}
#set-overflow {
overflow:hidden;
width:100%;
height:100%;
border:1px solid red;
position:absolute;
z-index:20;
}
.resize {
margin-left:auto;
margin-right:auto;
}
I included overflow:hidden on the containing div for future use as it will be part of a single-page scrolling site where the large image is only needed in the first div. The image needs to occupy 56% of the viewport or window.
If you need more clarification, please let me know!
Thanks in advance