css - 调整窗口大小时嵌套的 div 父级重叠子级

Question

调整浏览器窗口大小时，内容 div 与 Logo div 重叠。有什么解决办法吗？我希望 Logo 在调整窗口大小时调整大小。

@charset "utf-8";
/* CSS Document */

html, body {
    background-color:#ffffff;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

#content {
    height:74%;
    background-color:#7d6961;
    width:100%;
    position:relative;
    top: 10%;
}

#logo {
    background-image:url(logo.png);
    background-repeat:no-repeat;
    position:absolute;
    left: 9%;
    top: 5%;
    right: 2%;
    bottom: 21%;
    width: 77%;
    height: 65%;
}

Answer 1

您必须使用窗口 DOM 对象的调整大小回调。

$(window).resize(function () {
    var _width = $(window).width(),
        _height = $(window).height();

    console.log('width: ' + _width);
    console.log('height: ' + _height );
});​

查看此 jsfiddle 以获取实现示例(我将 Logo 放入 img-Tag 中，因此它始终完全可见): http://jsfiddle.net/qY3kM/

纯粹通过 css 动态调整图像大小是不可能的(afaik...也许通过使用 css-expressions，但它们很丑陋，根本不应该使用。)。也有用于动态调整大小的 jquery 插件，但我从未使用过，所以我不能推荐。