使用引导程序对图像进行居中和裁剪的正确方法是什么（如果需要，可以使用jquery）

Question

我使用引导程序，并且想要显示各种尺寸的图像的缩略图。

我希望缩略图具有相同的大小（例如， width="col-md-2"和height="100px" ）并居中并裁剪。

缩略图必须以某种方式可单击（以打开完整尺寸的图像或画廊视图）。

该解决方案可以混合使用bootstrap styling或jquery或jquery components 。

理想情况下，我希望代码看起来像这样：

<div class="row">
    <div class="..." style="...">
       <img src="path/to/img1.png" class="..." style="..."/>
       <img src="path/to/img2.png" class="..." style="..."/>
       ...
    </div>
</div>

或类似这样的东西：

<div class="row">
    <div class="..." style="...">
       <div class="..." style="...">
          <img src="path/to/img1.png" class="..." style="..."/>
       </div>

       <div class="..." style="...">
          <img src="path/to/img2.png" class="..." style="..."/>
       </div>
    </div>
</div>

（如果需要，可以使用jQuery初始化）

Answer 1

尝试这个..

.row {
  max-height:100px;
  overflow:hidden;
}

img {
   width:100%;
   min-height:100px;
}

演示： http ： //bootply.com/92024

Answer 2

我不知道您是否通过“裁剪”来指这些示例。

原始照片

在小提琴中裁剪

border-color: white;
border-radius: 63px;
border-style: solid;