div内图像周围不需要的空白区域

Question

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:

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?

Answer 1

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.

Answer 2

使用宽度100％并删除最大宽度。

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

Answer 3

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