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

Question

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

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

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

该解决方案可以混合使用bootstrap stylingorjquery或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;