Javascript 使用bootstrap（如果需要，使用jquery）居中和裁剪图像的正确方法是什么

我使用引导，我想显示不同大小图像的缩略图

我希望缩略图大小相同（比如说

width=“col-md-2”

width和

height=“100px”

），并居中裁剪

缩略图必须以某种方式单击（以打开全尺寸图像或图库视图）

解决方案可以混合使用

引导样式

或

jquery

或

jquery组件

理想情况下，我希望代码如下所示：

<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初始化）

我不知道下面这些例子中的“裁剪”是否是指这些示例

试试这个

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

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

---

演示：

你说的居中裁剪是什么意思？

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

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