我正在寻找一个 jquery 插件来调整和裁剪图像以适合父 div。有什么建议吗？谢谢。
我错了，我的意思是裁剪（而不是缩放）图像。想象一下，我有许多不同大小的图像和一个固定大小的 div。我需要调整图像大小以适应 div 的垂直或水平尺寸，并裁剪溢出的对手尺寸以适应父 div。它是动态的，所以我需要一个插件或模板来为我做这件事。
问问题
7252 次
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
于 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 回答