Image exceeding div size - css

Question

I have created a header div as follows:
<div class="header">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
Here is the header class:
.header {
background-color: #5DBCD2;
height: 10%;
}
Even though the div's max height is restricted to 10%, the image exceeds this.
Can someone please help

Answer 1

Add the following to your CSS so that you can have the image contained within the div nicely as it scales down.
.header img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
You can also add overflow: hidden; to the header element but that will cut it off rather than scale it, but it is another potential option.

Answer 2

I am not sure if it will be to any help, but try to add a max-height to the image in CSS.
EDIT
You could add this in the CSS (so that the image has 10% of the width of the parent):
.img-responsive {
width: 10%;
}

Answer 3

I tried your code with an image of 2000 x 1522 pixel dimensions.
Worked fine.
Few things you can do:
1) Debug your page using Developer tools in the browser.
2) Check if your css file path is correct.
3) Check for any errors in console part of the developer tools.

Answer 4

In your above code bootstrap before declaring row you must first declare container you should have something like this below
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
</div>
Probably this should work