0

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: Normal full screen

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

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

PIZZA PIZZA
  • 583
  • 2
  • 7
  • 20
  • To have a fixed width column next to a fluid column you would have to use `display:table`/`display:table-cell` or use flex styling. Flex: https://stackoverflow.com/questions/23794713/flexbox-two-fixed-width-columns-one-flexible, Table: https://stackoverflow.com/a/28932886/8085668 – WizardCoder Jun 19 '17 at 15:51
  • What do you want is a column with a fixed width, I suppose. So you should not use col-md-3 for the left column, but write the proper width in the style. For the right side you could use something like "width: calc(100% - 400px)" (400 is the left col width) – Alex Jun 19 '17 at 16:01

2 Answers2

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.

David
  • 16,246
  • 34
  • 103
  • 162
1

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

Sensoray
  • 2,360
  • 2
  • 18
  • 27