CSS：margin-left scale作为图像max-width的函数

Question

我有2x Div和1x Img以及以下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%;，然后＃{1}} #LogoDiv和#StageDiv都是#logoimg的函数，因为它会发生变化

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

这在纯CSS中是可行的还是我必须在margin-left:事件的javascript中执行此操作？ （不确定当前的实际函数调用是什么，但我确定我的好友谷歌会知道）我认为从长远来看，我很可能不得不使用javascript事件来扩展我的kineticjs阶段但是我很想知道是否有一些CSS魔法来完成第一部分。

思想？

编辑：

on resize

仍然会对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/

正如你在问题上所说的那样，画布需要缩放。