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

Question

我有一个产品视图，其中包含产品的图片，以及bootstrap container内的心形图像。我需要图像保持其比例，同时尽可能多地占用空间。

以下是几个例子。这个很好：

这个很糟糕，因为图像可能更大并且仍然适合其div：

我尝试了各种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

如果要水平或垂直填充空间，请保持比例。

水平，您只需指定属性宽度：100％：

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

垂直，您只需指定属性高度：100％：

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

最佳