1

ブラウザウィンドウのサイズを変更すると、コンテンツ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%;
}
4

1 に答える 1

0

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プラグインもありますが、使用したことがないため、お勧めできません。

于 2012-11-07T21:14:07.267 に答える