javascript - CSS: margin-left scale 作为图像最大宽度的函数

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%; 然后让 #LogoDiv 和 #StageDiv 的 margin-left: 成为#logoimg 变化时的功能

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

这在纯 CSS 中是否可行，还是我必须在 on resize 事件中用 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

如果您可以为整个 Logo 使用包装 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 共同为我们提供了您想要的自动边距。

更新 fiddle :http://jsfiddle.net/3KLUW/2/

不过，正如您在问题中所说， Canvas 需要缩放。