Just starting out with Bootstrap while working on an Angular2 project and I have a question.
Currently, I have a map-component taking up 3 columns on the left-hand side, but every time I resize the browser, the image also resizes. I want the image to remain a fixed size regardless of the browser size so I removed the class="img-responsive" from the img tag. However, this caused the two components to overlap when shrinking the browser. Can anyone help me figure out why this is happening?
Here's how the base app-component is structured:
<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, here is the map-template used for rendering the 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>
Image at normal full-screen size can be seen here: https://i.sstatic.net/nIMi5.png
Shrink the browser before disabling class="img-responsive" to see the overlap issue: https://i.sstatic.net/e5k40.png
After disabling class="img-responsive", you can see the overlapping problem here: https://i.sstatic.net/88cX6.png