圖像並不佔用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%; 
} 

最佳