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