0

我正在建立一个缩略图库。对于每个缩略图,我正在创建一个剪辑器 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%;
}
4

1 回答 1

2

尝试这个:

.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;
}
于 2013-01-24T03:17:00.680 回答