When disabling class=“img-responsive”, bootstrap columns overlaps

Question

I am new to Bootstrap, recently working on an Angular2 project, having a question to ask.

Currently I have a map-component left-hand side occupying 3 columns, however every time when I resize/shrink the browser, the image resizes/shrinks too. But I want the image to remain the fixed size whenever user resize the browser. So I delete the class="img-responsive" in the img tag. But those two components ended up overlapping when I shrink the browser. I am wondering why and could anyone please help me out.

For base app-component:

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

For the map-component, I have the corresponding map-template to render my image:

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

For normal full-screen sized browser:

Shrink the browser before disabling class="img-responsive":

Shrink the browser after disabling class="img-responsive":

Answer 1

If you want the image to stay to a certain size, I'd suggest defining a fixed width/height for the image. img-responsive resizes the image to the size of it's container's width.

Answer 2

Give the image a max width. The img-responsive mainly changes the picture's width.