class = "img-responsive"を無効にすると、列の重複が発生する

Question

最近、Angular2プロジェクトで作業しているBootstrapの新機能です。

現在、私は3つの列を占めるマップコンポーネントの左側を持っていますが、ブラウザをサイズ変更/縮小するたびに、イメージのサイズが縮小/縮小されます。しかし、私は、ユーザーがブラウザのサイズを変更するたびに画像を固定サイズにしたい。そこで、imgタグでclass = "img-responsive"を削除します。しかし、これら2つのコンポーネントは、ブラウザを縮小するとオーバーラップしてしまいました。私はなぜ、誰が私を助けてくれるのだろうかと思っています。ベースアプリ成分については

：通常のフルスクリーンサイズのブラウザのために

<div align="center" > 
    <div class="row" id="images"> 
     <div class="col-sm-12"> 
      <img class="img-responsive" [src]=getImageSource() height="90%"/> 
     </div> 
    </div> 
</div> 

：マップ・コンポーネントの場合

<div class="row "> 
    <div class="col-md-3"> 
     <legend-component class="legend-component"></legend-component> 
     <map-component></map-component> 
    </div> 

    <div class="col-md-9"> 
     <sidebar-component></sidebar-component> 
     <table-component></table-component> 
    </div> 
</div> 

、私は私の画像をレンダリングするための対応するマップ・テンプレートがあります。 ：

は、クラス= "IMG応答性を" 無効にする前にブラウザを縮小しますあなたがイメージを特定のサイズに滞在したい場合は、私はイメージのための固定幅/高さを定義することをお勧めしたい

Answer 1

：

は、クラス=「IMG応答性」を無効にした後、ブラウザを縮小します。 img-responsiveは画像をコンテナの幅のサイズにリサイズします。

Answer 2

イメージに最大幅を与えます。 img-responsiveは主に画像の幅を変更します。