html - 在 div 中居中和剪辑图像

Question

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

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

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

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

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

---

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