CSS：利润率左规模为图像最大宽度的功能

Question

我有2倍的div和1x图与下面的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; /* */ 
} 

#logoimg里面，我想用max-width: 75%;，然后有margin-left:既#LogoDiv和#StageDiv是#logoimg的功能，因为它改变了

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

这是可能的纯CSS或将我的做到这一点在JavaScript事件？ （不知道实际的功能调用是目前，但我确定我的朋友谷歌会知道）我认为从长远来看，我很可能不得不使用JavaScript事件来扩展我的kineticjs阶段，但我很想知道如果有一些CSS巫术做第一部分。

想法？

编辑：

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

仍然有兴趣在CSS的解决方案

Answer 1

如果你可以用一个包装DIV整个标志脱身：

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

然后你可以设置其上的width和max-width，并使用margin: auto将其居中放置在页面上：

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

和定位的其他元素变得更加容易：

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

#StageDiv { 
    text-align: center; 
} 

#logoimg { 
    width: 100%; 
} 

的margin: auto和text-align: center一起给我们你想要的自动保证金。

更新小提琴：http://jsfiddle.net/3KLUW/2/

画布需要，虽然扩大规模，因为你的问题时说。