1

Bootstrapフレームワークを使用していて、親divに。position:relativeの画像が含まれ、子divに。の画像が含まれていposition:absoluteます。左と上をパーセンテージで使用して、子divを親divの右下隅にプッシュしています。

ChromeとSafariでは、すべてが子divの位置で期待どおりに機能し、ブラウザのサイズが変更されると、画像が応答して適切に拡大縮小されます。ただし、FirefoxおよびInternet Explorerでは、子div内の画像のサイズ変更に失敗します。position:absoluteBoostrapの画像サイズ変更機能を壊しているようです。

誰かがこれを処理する正しい方法、または回避策を知っていますか？

実例：http ：//www.smartbombinteractive.com/testbed/bootstrap_resize/

HTML：

<div> class="header-image"><img src="img/img_test_bg.jpg">
        <div class="corner-peal"><img src="img/header_corner_peal.png">
        </div>
</div>

CSS：

.header-image{
    text-align:center;
    position:relative;
}
.corner-peal{
    position:absolute;
    left:50.99%;
    top: 17.295%;
}
4

1 に答える 1

0

私はとても初心者です！Bootstrap は、コンテナーの幅に基づいてイメージをスケーリングします。解決策は、子のパーセンテージ幅を設定することです (Chrome と Safari はこれを行いますが、Fire Fox と IE は行いません)。

.corner-peal{
    position:absolute;
    left:50.99%;
    top: 17.295%;
    width:49.01%;
}
于 2013-03-25T21:37:20.867 に答える