禁用class =“img-responsive”时，bootstrap列重叠

Question

我是Bootstrap的新手，最近正在研究一个Angular2项目，有一个问题要问。

目前我有一个地图组件左侧占用3列，但每当我调整浏览器大小/缩小时，图像也会调整/缩小。但是，每当用户调整浏览器大小时，我希望图像保持固定大小。所以我删除了img标签中的 class =“img-responsive”。但是当我缩小浏览器时，这两个组件最终重叠了。我想知道为什么，有人可以帮助我。

对于基本应用程序组件：

<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>

对于地图组件，我有相应的地图模板来渲染我的图像：

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

对于普通的全屏大小浏览器：

在禁用class =“img-responsive”之前缩小浏览器：

禁用class =“img-responsive”后缩小浏览器：

Answer 1

如果您希望图像保持一定的大小，我建议为图像定义固定的宽度/高度。 img-responsive将图像大小调整为容器宽度的大小。

Answer 2

为图像指定最大宽度。 img-responsive主要改变图片的宽度。