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中居中（垂直/水平），其余部分被剪裁。

如果我的描述令人困惑，这是一个例子：假设缩略图大小为300x100px。所以高度是最小的属性，所以我将其设置为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;
}

div中的中心和剪辑图像

1 个答案: