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

What is the proper way to center and crop an image using bootstrap (with jquery if needed)

本文关键字：如果 是什么 jquery 可以使 方法 引导程序 裁剪 图像      更新时间：2023-09-26

我使用bootstrap，我想显示各种大小的图像缩略图。

我希望缩略图具有相同的大小（假设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 初始化）

试试这个。

.row {
  max-height:100px;
  overflow:hidden;
}
img {
   width:100%;
   min-height:100px;
}

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

我不知道

你是否是指下面的"裁剪"例子。

原始照片

在小提琴中裁剪

border-color: white;
border-radius: 63px;
border-style: solid;
相关文章：