Css 图像不'；不要把所有的都拿走'；div内的s空间

我有一个带有产品图像的产品视图，还有一个位于

引导容器中的心脏图像。我需要图像保持其比例，同时尽可能占据空间

这里有几个例子。这个很好：


这张照片不好，因为图像可能会更大，并且仍然适合它的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更改为此

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

}将您的css更改为此

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

}
要保持比例，您必须选择是水平还是垂直填充空间

在水平方向上，只需指定属性宽度：100%：

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

在垂直方向上，只需指定属性高度：100%：

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

最佳
要保持比例，您必须选择是水平还是垂直填充空间

在水平方向上，只需指定属性宽度：100%：

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

在垂直方向上，只需指定属性高度：100%：

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

最好的
它放松了这样的比例。这在我的网站上是可行的，试试这个
高度：100%；宽度：100%它放松了这样的比例。这在我的网站上是可行的，试试这个
高度：100%；宽度：100%将其保留为高度：100%或宽度：100%会使图像跳出框外。它必须是最大高度：100%，我的问题保持不变。你有一个JSFIDLE或一个我们可以看到它的链接吗？只保留高度：100%或宽度：100%，图像就会跳出框外。它必须是最大高度：100%，我的问题保持不变。你有一个JSFIDLE或者一个我们可以看到它的链接吗？