引導縮略圖裁剪和定位

Question

我有這3個不同大小的圖像。當我裏面三個容器中，這樣顯示出來：

@foreach (var item in Model) { 
    <div class="avatar-container"> 
     <img class="avatar img-thumbnail" src="@Href("~/Content/Avatars/",item.Name+".jpg")" /> 
    </div> 
} 

這是我的CSS文件：

div.avatar-container { 
    display: inline-block; 
    max-height: 50px; 
    overflow: hidden; 
    width: 70px; 
} 

.avatar { 
    width: 100%; 
    height:auto; 
    overflow: hidden; 
} 

而且還IMG縮略圖是bootstrap.css（線368）。一段時間後，我設法裁剪圖像（使用溢出屬性），以便每個頭像顯示爲70x50縮略圖。

看看這3個返回縮略圖：image
[問題]

此搜索。它也裁剪了我的縮略圖的底部。
image2。嗯，我會認爲縮略圖是正方形，而不是矩形。
image3。如何裁剪圖像的中間（垂直和水平方向）？

Answer 1

這是我想出的，使用JavaScript和另一個縮略圖容器。

@*HTML-----------------------------------------------*@ 
@foreach (var item in Model) { 
    <div class="avatar-container"> 
     <div class="img-thumbnail"> 
      <img class="avatar img-thumbnail" src="@Href("~/Content/Avatars/",item.Name+".jpg")" /> 
     </div> 
    </div> 
} 
@*JavaScript-----------------------------------------*@ 
//If the image has greater Width => display as landscape 
<script> 
     $(".avatar").each(function() { 
      if (this.naturalWidth > this.naturalHeight) { 
       $(this).addClass("landscape"); 
      } 
     }); 
</script> 
@*CSS------------------------------------------------*@ 
//That big container outside 
div.avatar-container { 
    display: inline-block; 
    position: relative; 
    width: 70px; 
    height:70px; 
    overflow: hidden; 
} 
//And here's the extra thumbnail container 
div.img-thumbnail{ 
    width:100% !important; 
    height:100%; 
    background-color:#e1dada; 
} 
//This is for the actual image 
.img-thumbnail{ 
    padding:1px !important; 
} 
//This one sets the image as a portrait 
.avatar { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 100%; 
    width: auto; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    -moz-transform: translate(-50%,-50%); 
    -o-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
} 
//This one helps setting up the image horizontally 
.landscape{ 
    width:100%; 
    height:auto; 
} 

最後的結果看起來像this