图像并不占用div内的所有空间

Question

我有产品的图像和bootstrap container内的心脏图像的产品视图。我需要图像保持其比例，同时尽可能多地占用空间。

这里有几个例子。这一个是好的：

这是最糟糕的，因为图像可以更大，并且仍然符合其格内：

我尝试过各种CSS选项，但是这是我可以得到的最好的。这里是我的代码：

<div class="row" align="center" style="border:0px solid green;">      
    <div align="center" class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-7 col-lg-offset-2 galleryproductimg " style="border:0px solid red; margin-top:2px; margin-bottom:0px;"> 
     <a href='#{product.itemUrl}' target="_blank"> <img id="thumbnailId" src='#{product.thumbnailUrl}' class="img-responsive prodimg" style="border: 0px solid blue; margin-top:0px;" /></a>  
    </div> 

    <div align="right" class="col-sx-1 col-sm-3 col-md-3 col-lg-3" style="border:0px solid black; margin-top:2px; margin-bottom:2px; float:right">  
    <h:commandLink title="Favorite" id="heartImageUnLogged" value="" action="#{mySrchie.paintHeart(product)}"> 
     <h:graphicImage id="heartImageUnLoggedId" library="images" name='#{mySrchie.getHeartImage(product)}' style="display: inline-block;" class="img-responsive"/> 
    </h:commandLink> 
    </div> 
</div> 

而且CSS：

.galleryproductimg { 
    max-width: 100%; 
    height:110px !important; 
    max-height:110px !important; 
} 

.prodimg { 
    position: relative; 
    top: 0; 
    left: 0; 
    height: 110px; 
    max-height: 100%; 
    max-width: 100%; 
} 

我缺少什么？图像如何保持其比例并同时占据它的所有空间？

Answer 1

改变你的CSS这个。

.prodimg { 
    position: relative; 
    top: 0; 
    left: 0; 
    height: 110px; 
    max-height: 100%; 
    max-width: 100%; 
    height:100%; 
    width:100%; 

}

Answer 2

，让你有选择，如果你想水平或垂直填补空间比例。

水平，你只需指定属性width：100％：

.prodimg { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

垂直，你只需指定属性height：100％：

.prodimg { 
    position: relative; 
    top: 0; 
    left: 0; 
    height: 100%; 
} 

最佳