jquery - 图像调整大小和裁剪以适合父 div

Question

我正在寻找一个 jquery 插件来调整和裁剪图像以适合父 div。有什么建议吗？谢谢。

我的意思是裁剪(而不是缩放)图像。假设我有许多不同尺寸的图像和一个固定尺寸的 div。我需要调整图像大小以适合 div 的垂直或水平尺寸，并裁剪溢出对手尺寸以适合父 div。它是动态的，所以我需要一个插件或模板来为我做这件事。

Answer 1

我编写了一个 Jquery 函数，您只需将父 div 的类和您想要的 img 大小发送到该函数即可使用，它会将子 img 调整为该大小并将其水平或垂直居中。如果 img 小于父 div，它会将父 div 缩小到子元素的大小。 (从那以后就按照我使用它的目的去做了。)

DEMO

这是html结构

<div class="photo-card-image-wrapper">
    <img src="img.png" />
</div>

这是使函数工作所需的最少 css，这是父 div 上需要的

.photo-card-image-wrapper {
    overflow: hidden;
}

这是你需要调用的函数，你只需要在父类或 id 中发送，就像这样 .photo-card-image-wrapper 或者如果它是一个 id #photo-卡片图像包装器

$(function() {
  cropAndCenterImage(".photo-card-image-wrapper", 154);
});

这就是你需要的功能

function cropAndCenterImage(el, size) {
    //el = img wrapper
    //img = img element
    if (size === undefined || size === null) { 
      size = 154;
    }
    var $el = $(el);
    var $img = $(el + " img");
    //console.log($el);
    //console.log($img);
    $img.width("auto").height("auto");
    var imgWidth = $img.width();
    var imgHeight = $img.height();
    //console.log(imgHeight, imgWidth);

    //hopefully that returns the img to it's default height and width by making the inline style to empty quotes

    if( imgWidth > imgHeight ) {
        //Crop image
      //console.log("width greater than height");
        if ( imgHeight >= size  ) {
            //console.log("hit if");
            $img.height(size);
            imgHeight = $img.height();
            imgWidth = $img.width();
            $el.height(imgHeight).width(imgHeight);
        } else {
            //console.log("hit else");
            $el.height(imgHeight).width(imgHeight);
            $img.height(imgHeight).width(imgWidth);
        }

        //Center image horizontally
        var leftInt = (imgWidth - $el.width()) / 2;
        $img.css({ "margin-left": "-" + leftInt + "px", "margin-top": "0" });
    } else {
        //Crop image
      //console.log("height greater than width");
        if ( imgWidth >= size  ) {
            $img.width(size);
            imgHeight = $img.height();
            imgWidth = $img.width();
            $el.height(imgWidth).width(imgWidth);
        } else {
            $el.height(imgWidth).width(imgWidth);
            $img.height(imgHeight).width(imgWidth);
        }
        imgHeight = $img.height();
        //Center image vertically
        var topInt = (imgHeight - $el.height()) / 2;
        //console.log(topInt);
        $img.css({ "margin-top": "-" + topInt + "px", "margin-left": "0"});
    }

}

我知道这不是典型的 Jquery 函数，我只是还没有学会这样做，但它仍然是一个函数。