調整窗口大小時嵌套的div父重疊子

Question

調整瀏覽器窗口大小時，內容div與徽標div重疊。 有什么解決辦法嗎 我希望在調整窗口大小時調整徽標的大小。

@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

您必須使用window-DOM對象的resize-callback。

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

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

請查看此jsfiddle以獲得一個實現示例（我將徽標放入了img-Tag中，因此它始終是完全可見的）： http : //jsfiddle.net/qY3kM/

不可能僅通過css來動態調整圖像的大小（afaik ...也許通過使用css-expressions來實現，但是它們很丑陋，根本不應該使用。）。 也有用於動態調整大小的jquery插件，但我從未使用過，因此我不推薦使用。