CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Eddy
Eddy

Reputation: 3713

Unwanted white space around image inside div

I need to display an image inside a div with bootstrap and there's an uncalled for white space around the image. This is what it looks like:

enter image description here

I'm not talking about the white background - it's intentional. I am talking about the fact the image doesn't stretch to the width of the div. This is the code I'm using: 

<div align="center" class="col-xs-3 col-sm-2 col-md-3 whitebgdiv" style="border:0px solid red; margin-top:5px; margin-bottom:5px; margin-left:5px;">
    <a href='#{product.itemUrl}' target="_blank"><img src='#{product.thumbnailUrl}' style="border: 0px solid blue;" class="img-responsive productimg vertical-align2" /></a> <br/>                            
</div>

The relevant css classes: 

.whitebgdiv {
   background-image:url('../resources/images/whitebg.jpg');
   border-radius: 2px;
   margin-left:0px;
}

.productimg {
   width: 6em;
   max-width: 180px;
}

I tried display:block and display:inline but they do nothing. What am I missing?

Upvotes: 1

Views: 3825

Answers (3)

Raj
Raj

Reputation: 570

use width 100% and remove max-width.

.productimg { display:block; width: 100%; height:auto;}

Upvotes: 1

cptstarling
cptstarling

Reputation: 779

Try this:

.productimg{
  width: 100%;
  height: auto;
}

If the width of its container is defined, you don't need to set a max-width on the image either with this code.

Upvotes: 3

Arjun
Arjun

Reputation: 2227

Remove the width to image the white space is due to max-width to image tag. the container(div) with is higher then the image width so your getting white space between those

Upvotes: 0

Related Questions