0

I'm trying to center a resized image within its container (which should also be centered). I don't understand why this is so difficult, but I've been trying to get this working for 7 hours now. Please help :-)

html: 

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

css:

/*------------------------------*/
* {
    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 need the overflow:hidden on the containing div as this will eventually be a single-page scrolling site and the large image is required only in the first div scrolled to. The image needs to be 56% of the viewport/window.

Please let me know whether I need to clarify anything.

MTIA

circey
  • 2,032
  • 6
  • 35
  • 51

1 Answers1

1

Like this?

http://jsfiddle.net/9ZgWg/26/

Let me know if that's not what you're looking for and we can tweak it together.

Milimetric
  • 13,411
  • 4
  • 44
  • 56
  • Really close, but the image should remain in proportion. Proportion of image is approx height:width 1:4. – circey Apr 16 '11 at 08:59
  • K, fixed and updated link. I got rid of that large-image div, if you add it back just keep its style neutral and you're set. – Milimetric Apr 16 '11 at 09:33
  • It almost works! It's working perfectly on browser resize, but not on document load, which I don't understand. – circey Apr 16 '11 at 09:42
  • What browser? looks fine to me in all the browsers I've tried. Are you talking about your code or the jsfiddle? I was deleting properties and style definitions in the fiddle that you might've missed. – Milimetric Apr 16 '11 at 09:47
  • I've updated my code again just to be sure. The jquery seems to work on document load in FF, but not Safari or Chrome (mac). The resizing works on all the browsers. – circey Apr 16 '11 at 09:53
  • does the fiddle work in Chrome? I'm on Chrome in Windows, that'd be pretty weird if it doesn't work for you on a mac. – Milimetric Apr 16 '11 at 09:56
  • the fiddle does indeed work in Chrome. I've taken all the css, jquery & html from the fiddle. So can't understand why it's not working on document load in Chrome & Safari. – circey Apr 16 '11 at 09:59
  • well it sound like you have some extra code or styling that's making it do something different on load. Try to simplify the style, just take out what you don't need like I started to. – Milimetric Apr 16 '11 at 10:03
  • there's no extra code or styling. it's as is in the fiddle. I've checked the element on load (w = 1004) in Chrome and get the following: . – circey Apr 16 '11 at 10:15
  • on resize, (w = 973), – circey Apr 16 '11 at 10:18
  • oh interesting, the imageResize must be firing before the img has any width. Because look, 502 is 1004/2 which means $('#set-overflow img').width() is 0. You can alert that on load to confirm. – Milimetric Apr 16 '11 at 10:28
  • Absolutely. So is there a timeout or something I can use so it waits until the width is set? – circey Apr 16 '11 at 10:33
  • Well, that's what $(document).ready() is for. If you do alert(left); does it alert twice? In what order? – Milimetric Apr 16 '11 at 10:51
  • no, just once on document load if I add the alert to the function. – circey Apr 16 '11 at 10:53
  • It should be $(document).ready() like in the fiddle. Load is before the DOM is ready, just after all the HTML was downloaded. – Milimetric Apr 16 '11 at 11:16
  • okay, i've put all the jquery refs after

    , which I guess I should've done before heh, and it's working after a short delay in which the img resizes. i'm going to go die now. thank you so much for your help - i appreciate it so much.

     – circey Apr 16 '11 at 11:41
  • @circey - just thought of something while I was sleeping. Putting the script outside the

    tag does not validate. You can achieve the same effect by putting it right *before* the tag. But if you put it inside `$(document).ready(function(){ *HERE* }`, you should be good too, it sounded like you were using document.load which is not right.

     – Milimetric Apr 16 '11 at 16:07
  • I had a thought too. I've changed the css for the img to display:none, then added '.show()' to the end of the img resize code. Works much better as the user doesn't see the resize effect. As you suggested, I've moved the script inside the

    tag and it still works fine in all browsers. I *was* using document.ready - not document.load - I was just too tired to know the difference! Many thanks again :-)

     – circey Apr 16 '11 at 22:54