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>

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

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

以下是您需要在父级的类或ID中调用您需要发送的函数，如.photo-card-image-wrapper或者是#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函数，我还没有学会这样做，但它仍然是一个功能。

Answer 2

你不需要一个插件......只有CSS才能做到。

img { width:100%; }

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

Fiddle

Answer 3

jQuery UI的插件可以帮助你。

http://jqueryui.com/resizable/

祝你好运。

Answer 4

这是你想要的吗？

<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>

图像调整大小并裁剪以适合父div

4 个答案:

DEMO