画像位置を反応させる？

Question

私はブートストラップを使って小さなウェブサイトを作っています。私は休止しています。私はこれらの2つの画像をnavbarのどちらかの側に追加したいと思いますが、ポジションをどのように反応させるかはわかりません。ここでは、1つのブラウザサイズで作業する例を示します。

Working

それは異なるサイズでだときしかし、その後、画像はこのような何かを見て開始します。

Not Working

私は、これは、それが設定された場所に設定しますと、私が使用したコードで起こることを知っていました。私はこれを行う別の（より良い）方法を想像することはできません。ここでは、私が最初にこの位置にそれらを得るために私が使用したCSSがあります。

#wrap-left { 
    position: absolute; 
    visibility: visible; 
    left: -5px; 
    top: 61px; 
    z-index: 200; 
} 

#wrap-right { 
    position: absolute; 
    visibility: visible; 
    left: 705px; 
    top: 61px; 
    z-index: 200; 
} 

そして、ここでは、画像のためのHTMLは、事前に

 <div id="wrap-left"> 
      <img src="assets/img/wrap-left.png"> 
     </div> 

     <div id="wrap-right"> 
      <img src="assets/img/wrap-right.png"> 
     </div> 

おかげです。

編集：パーセンテージを使用すると、それはずっと良くなりますが、完全ではありません。

EDIT：後で自分のコンピュータにアクセスするときに、@mediaクエリを使いこなそうとします。うまくいけばそれは私の答えです。

Answer 1

私の問題に対する答えが見つかりました。私がする必要があったのは、特定の画面サイズのために私のCSSで@mediaクエリを使用することでした。これは私がこの問題を回避するために使用したコードでした。私はイメージが、それはIDだ使用し、異なる画面サイズに画像を置くために別の場所を与えることになる場所を変更することができた特定の画面サイズのためにこれらのメディアクエリを使用することにより

@media only screen 
and (max-width : 767px) { 
    #wrap-left { 
     display: none; 
    } 
    #wrap-right { 
     display: none; 
    } 
} 

@media only screen 
and (min-width : 992px) { 
    #wrap-left { 
    position: absolute; 
    visibility: visible; 
    left: -5px; 
    top: 81px; 
    z-index: 200; 
} 
    #wrap-right { 
    position: absolute; 
    visibility: visible; 
    left: 925px; 
    top: 81px; 
    z-index: 200; 
} 
} 

@media only screen 
and (min-width : 1200px) { 
    #wrap-left { 
    position: absolute; 
    visibility: visible; 
    left: -5px; 
    top: 89px; 
    z-index: 200; 
} 
    #wrap-right { 
    position: absolute; 
    visibility: visible; 
    left: 1125px; 
    top: 89px; 
    z-index: 200; 
} 
} 


@media only screen 
and (min-width : 1824px) { 
    #wrap-left { 
    position: absolute; 
    visibility: visible; 
    left: -5px; 
    top: 89px; 
    z-index: 200; 
} 
    #wrap-right { 
    position: absolute; 
    visibility: visible; 
    left: 1125px; 
    top: 89px; 
    z-index: 200; 
} 
} 

。しかし、ある時点でページが小さくなると縮小が始まるので、これを行う正確な方法が見つからないので、この時点でイメージを取り除きます。