在 div 中居中并剪辑图像

Question

我正在建立一个缩略图库。对于每个缩略图，我正在创建一个剪辑器 div 并将图像放置在该 div 中。不同图像的缩略图大小不同，其中剪辑器 div 为 150x150px

<div class='clipper-div'>
    <img class='image1' src='img/img2.jpg'/>  
</div>

我想放置该图像，使其完全占据该 div，并剪切图像的其余部分，使其完全居中。

为了做到这一点，我看到图像的最小尺寸（高度/宽度）是 100%。然后是其他维度，现在大于 div 的 150px。我正在计算差异，将其除以 2 并将 top/left 属性设置为该值的负数，使图像看起来居中，然后将 overflow:hidden 添加到裁剪器 div 中，使多余的部分不可见。

我想知道是否有更好的方法来做到这一点，而不是我计算这些值，我可以设置 CSS 属性，以便所有图像将在该 div 中（垂直/水平）居中，其余部分被剪裁。

---

如果我的描述令人困惑，这里有一个例子： 假设缩略图大小为 300x100 像素。所以高度是最小的属性，所以我将它设置为 100%。所以高度变成150，宽度变成400px，所以现在我计算偏移量。在这种情况下 (400-150)/2 = 125 像素。现在我将图像左侧设置为 -125px

.image1{
     position:absolute;
     left:-125px;
     height:100%;
}

Answer 1

试试这个：

.Image1 { 
    background: url(images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}