Question

我想要的是什么：

将不同尺寸和分辨率的图像剪裁成方形，其宽度是可变的，取决于网格系统。图像在中间居中，包括垂直和水平。

我的方法：

使用overflow:hidden;和css定位制作面具。

HTML：

<div class="wrapper">
    <img/>
</div>

的CSS：

.wrapper {
    overflow: hidden;
    position: relative;
    img {
        position: absolute;
    }
}

js（jQuery）：

function imgClip() {
    $wrapperWidth = $(".wrapper").width();
    $(".wrapper").height($wrapperWidth);

    $(".wrapper img").each(function() {

        $img = $(this);

        if ($img.width() >= $img.height()) {        
            $img.height($wrapperWidth);
            $img.css('left', ($img.width()-$wrapperWidth)/2*(-1));
        }
        else {
            $img.width($wrapperWidth);
            $img.css('top', ($img.height()-$wrapperWidth)/2*(-1));
        }
    });
}

$(document).ready(imgClip);
$(window).resize(imgClip);

大部分时间都有效，但有时它会断开并看起来like this。

偏移量不正确包装纸宽度的50％
并非所有图片都不正确
在重新加载页面或调整窗口大小时修复

有谁知道这是什么问题？

Answer 1

也许不是您正在寻找的东西，但您可以考虑使用背景图片吗？

.wrapper {
    overflow: hidden;
    position: relative;
    background-image: url('path/to/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

jquery / css图像剪辑

1 个答案: