Нежелательное белое пространство вокруг изображения внутри div

Question

Мне нужно отобразить изображение внутри div с bootstrap, и там есть невостребованный пробел вокруг изображения. Это то, что он выглядит следующим образом:

Я не говорю о белом фоне - это намеренно. Я говорю о том, что изображение не растягивается до ширины div. Это код, я использую:

<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> 

Соответствующие css классы:

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

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

Я попытался display:block и display:inline, но они ничего не делают. Что мне не хватает?

Answer 1

Попробуй это:

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

Если ширина контейнера определяется, вам не потребуется задать max-width на изображении либо с этим кодом.

Answer 2

Удалите ширину изображения, чтобы изображение пробежало из-за max-width в тег изображения. контейнер (дела) с выше, тем изображением ширина поэтому вашими получать пустое пространство между этим

Answer 3

использовать ширину 100% и удалить максимальную ширину.

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