CSS：边距左比例作为图像最大宽度的函数

Question

I have 2x Divs and 1x Img with the following CSS

#StageDiv {
    position: absolute;
    left: 50%;
    margin-left: -200px;
}

#LogoDiv {
    position: absolute;
    margin-top: 135px;
    left: 50%;
    margin-left: -500px;
}

#logoimg {
    /* max-width: 75%; /* */
    width: 1000px; /* */  
}

inside of #logoimg, I would like to use max-width: 75%; and then have margin-left: of both #LogoDiv and #StageDiv be a function of #logoimg as it changes

http://jsfiddle.net/3KLUW/1/

Is this possible in pure CSS or will I have to do this in javascript in a on resize event? (not sure what the actual function call is currently but im sure my buddy google will know) I think in the long run, I will most likely have to use a javascript event to scale my kineticjs stage anyway but I am curious to know if there is some CSS wizardry to do the first part.

Thoughts?

Edit:

window.onresize=function(){
    var img = document.getElementById('logoimg');
    var width = img.offsetWidth;
    var div = document.getElementById('LogoDiv');
    div.style.marginLeft= "-" + width/2 + "px";
};

still would be interested in a CSS solution

Answer 1

If you can get away with a wrapper div for the whole logo:

<div id="logo">
  <div id="StageDiv">...</div>
  <div id="LogoDiv">
    <img id="logoimg" src="..." />
  </div>
</div>

Then you can set the width and max-width on it, and use margin: auto to center it on the page:

#logo {
    width: 1000px;
    max-width: 75%;
    margin: auto;
    position: relative;
}

And positioning the other elements become much easier:

#LogoDiv {
    top: 135px;
    position: absolute;
}

#StageDiv {
    text-align: center;
}

#logoimg {
    width: 100%;
}

The margin: auto and text-align: center together give us the automatic margin you wanted.

Updated fiddle: http://jsfiddle.net/3KLUW/2/

The canvas will need to be scaled though, as you said on the question.