-1

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

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

4

3 回答 3

2

我写了一个 Jquery 函数，你可以使用它只发送父 div 的类和你想要的函数的 img 大小，它会将子 img 调整到该大小并将其水平或垂直居中。如果 img 小于父 div，它会将父 div 缩小到子 div 的大小。（因为我用它来做这件事。）

演示

这是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-card-image-wrapper

$(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 函数，我只是还没有学会这样做，但它仍然是一个函数。

于 2013-11-02T04:55:53.837 回答
1

您不需要为此使用插件......只需 CSS 即可。

img { width:100%; }

您也可以添加height:100%;，但这不会按比例缩放图像。

小提琴。

于 2013-03-26T03:16:10.973 回答
1

这是你想要的吗？

<html>
<head>
  <style type="text/css">
  div{ margin:10px 0px; border: 1px solid black; dispaly:block;} 
 div img{width:100%;height:100%;}  
</style>
</head>
<body>
  <div style="width:100px; height:50px"><img src="https://www.google.com/images/srpr/logo4w.png"></div>
<div style="width:100px; height:250px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:200px; height:60px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:300px; height:220px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:200px; height:150px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:300px; height:20px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:50px; height:400px"><img src="https://www.google.com/images/srpr/logo4w.png"></div>   
</body>
</html>
于 2013-03-26T03:35:25.423 回答