CODEWITHSUNDEEP
csstwitter-bootstrap
TimeToCodeTheRoad
TimeToCodeTheRoad

Reputation: 7312

Image exceeding div size

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

Upvotes: 5

Views: 13013

Answers (4)

Hassan Sani
Hassan Sani

Reputation: 124

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

Upvotes: 0

Jonilo5
Jonilo5

Reputation: 45

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%; }

Upvotes: 1

yogikrathee
yogikrathee

Reputation: 29

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.

Upvotes: 0

user7236046
user7236046

Reputation:

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.

Upvotes: 10

Related Questions