如何按比例调整图像大小/保持纵横比？

我有尺寸相当大的图像，我想用jQuery缩小它，同时保持比例约束，即相同的纵横比。

有人能指点我一些代码，或者解释逻辑吗？

Answer 1

看看这段代码http://ericjuden.com/2009/07/jquery-image-resize/

 $(document).ready(function() { $('.story-small img').each(function() { var maxWidth = 100; // Max width for the image var maxHeight = 100; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image width = width * ratio; // Reset width to match scaled image } // Check if current height is larger than max if(height > maxHeight){ ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image height = height * ratio; // Reset height to match scaled image } }); }); 

Answer 2

我认为这是一个非常酷的方法 ：

  /** * Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging * images to fit into a certain area. * * @param {Number} srcWidth width of source image * @param {Number} srcHeight height of source image * @param {Number} maxWidth maximum available width * @param {Number} maxHeight maximum available height * @return {Object} { width, height } */ function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight); return { width: srcWidth*ratio, height: srcHeight*ratio }; } 

Answer 3

如果我正确地理解了这个问题，你甚至不需要jQuery。 在客户端上按比例缩放图像可以使用CSS来完成：只需将其max-width和max-height为100% 。

 <div style="height: 100px"> <img src="http://www.getdigital.dehttp://img.dovov.comprodukte/t4/t4_css_sucks2.jpg" style="max-height: 100%; max-width: 100%"> </div>​ 

这是小提琴： http : //jsfiddle.net/9EQ5c/

Answer 4

其实我刚刚遇到了这个问题，我发现的解决scheme奇怪简单而奇怪

 $("#someimage").css({height:<some new height>}) 

奇迹般地将图像调整到新的高度并保持相同的比例！

Answer 5

<img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" > <img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" >帮助？

浏览器将保持高宽比保持不变。

即当图像宽度大于高度时， max-width踢入，其高度将按比例计算。 同样，当高度大于宽度时， max-height将起作用。

你不需要任何jQuery或JavaScript的这个。

由ie7 +和其他浏览器支持（ http://caniuse.com/minmaxwh ）。

Answer 6

为了确定长宽比 ，你需要有一个比例的目标。

 function getHeight(length, ratio) { var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1)))); return Math.round(height); } 

 function getWidth(length, ratio) { var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1)))); return Math.round(width); } 

在这个例子中，我使用16:10因为这是典型的显示器纵横比。

 var ratio = (16/10); var height = getHeight(300,ratio); var width = getWidth(height,ratio); console.log(height); console.log(width); 

从上面的结果是147和300

Answer 7

这个问题有4个参数

1. 当前图像宽度iX
2. 当前图像高度iY
3. 目标视口宽度cX
4. 目标视口高度cY

有3个不同的条件参数

1. cX> cY？
2. iX> cX？
3. iY> cY？

解

1. find目标视图端口F的较小侧
2. find当前视图端口L的较大一侧
3. 找出F / L =因子的因子
4. 将当前端口的两侧乘以因子即fX = iX *因子; fY = iY *因子

这就是你需要做的。

 //Pseudo code iX;//current width of image in the client iY;//current height of image in the client cX;//configured width cY;//configured height fX;//final width fY;//final height 1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk 2. lE = iX > iY ? iX: iY; //long edge 3. if ( cX < cY ) then 4. factor = cX/lE; else 5. factor = cY/lE; 6. fX = iX * factor ; fY = iY * factor ; 

这是一个成熟的论坛，我不给你代码:)

Answer 8

  $('#productThumb img').each(function() { var maxWidth = 140; // Max width for the image var maxHeight = 140; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > height){ height = ( height / width ) * maxHeight; } else if(height > width){ maxWidth = (width/height)* maxWidth; } $(this).css("width", maxWidth); // Set new width $(this).css("height", maxHeight); // Scale height based on ratio }); 

Answer 9

这应该适用于所有可能的比例的图像

 $(document).ready(function() { $('.list img').each(function() { var maxWidth = 100; var maxHeight = 100; var width = $(this).width(); var height = $(this).height(); var ratioW = maxWidth / width; // Width ratio var ratioH = maxHeight / height; // Height ratio // If height ratio is bigger then we need to scale height if(ratioH > ratioW){ $(this).css("width", maxWidth); $(this).css("height", height * ratioW); // Scale height according to width ratio } else{ // otherwise we scale width $(this).css("height", maxHeight); $(this).css("width", height * ratioH); // according to height ratio } }); }); 

Answer 10

如果图像是相称的，那么这个代码将填充图像的包装。 如果图像不成比例，则额外的宽度/高度将被裁剪。

  <script type="text/javascript"> $(function(){ $('#slider img').each(function(){ var ReqWidth = 1000; // Max width for the image var ReqHeight = 300; // Max height for the image var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if (width > height && height < ReqHeight) { $(this).css("min-height", ReqHeight); // Set new height } else if (width > height && width < ReqWidth) { $(this).css("min-width", ReqWidth); // Set new width } else if (width > height && width > ReqWidth) { $(this).css("max-width", ReqWidth); // Set new width } else (height > width && width < ReqWidth) { $(this).css("min-width", ReqWidth); // Set new width } }); }); </script> 

Answer 11

没有额外的临时variables或括号。

  var width= $(this).width(), height= $(this).height() , maxWidth=100, maxHeight= 100; if(width > maxWidth){ height = Math.floor( maxWidth * height / width ); width = maxWidth } if(height > maxHeight){ width = Math.floor( maxHeight * width / height ); height = maxHeight; } 

请记住：search引擎不喜欢它，如果宽度和高度属性不适合图像，但他们不知道JS。

Answer 12

经过一些试验和错误，我来到这个解决scheme：

 function center(img) { var div = img.parentNode; var divW = parseInt(div.style.width); var divH = parseInt(div.style.height); var srcW = img.width; var srcH = img.height; var ratio = Math.min(divW/srcW, divH/srcH); var newW = img.width * ratio; var newH = img.height * ratio; img.style.width = newW + "px"; img.style.height = newH + "px"; img.style.marginTop = (divH-newH)/2 + "px"; img.style.marginLeft = (divW-newW)/2 + "px"; } 

Answer 13

使用CSS可以实现resize（保持宽高比）。 这是丹达斯卡列斯库（Dan Dascalescu）的post所启发的一个更简单的答案。

http://jsbin.com/viqare

 img{ max-width:200px; /*Or define max-height*/ } 

 <img src="13/07/4-3/20/alastair-cook-ashes-profile_2967773.jpg" alt="Alastair Cook" /> <img src="http://e1.365dm.com/13/07/4-3/20/usman-khawaja-australia-profile_2974601.jpg" alt="Usman Khawaja"/> 

Answer 14

这是对Mehdiway答案的一个修正。 新的宽度和/或高度未被设置为最大值。 一个好的testing用例如下（1768 x 1075像素）： http : //spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png 。 （由于缺乏声望点，我无法对此进行评论。）

  // Make sure image doesn't exceed 100x100 pixels // note: takes jQuery img object not HTML: so width is a function // not a property. function resize_image (image) { var maxWidth = 100; // Max width for the image var maxHeight = 100; // Max height for the image var ratio = 0; // Used for aspect ratio // Get current dimensions var width = image.width() var height = image.height(); console.log("dimensions: " + width + "x" + height); // If the current width is larger than the max, scale height // to ratio of max width to current and then set width to max. if (width > maxWidth) { console.log("Shrinking width (and scaling height)") ratio = maxWidth / width; height = height * ratio; width = maxWidth; image.css("width", width); image.css("height", height); console.log("new dimensions: " + width + "x" + height); } // If the current height is larger than the max, scale width // to ratio of max height to current and then set height to max. if (height > maxHeight) { console.log("Shrinking height (and scaling width)") ratio = maxHeight / height; width = width * ratio; height = maxHeight; image.css("width", width); image.css("height", height); console.log("new dimensions: " + width + "x" + height); } } 

Answer 15

看看这一块…

 /** * @param {Number} width * @param {Number} height * @param {Number} destWidth * @param {Number} destHeight * * @return {width: Number, height:Number} */ function resizeKeepingRatio(width, height, destWidth, destHeight) { if (!width || !height || width <= 0 || height <= 0) { throw "Params error"; } var ratioW = width / destWidth; var ratioH = height / destHeight; if (ratioW <= 1 && ratioH <= 1) { var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH); width *= ratio; height *= ratio; } else if (ratioW > 1 && ratioH <= 1) { var ratio = 1 / ratioW; width *= ratio; height *= ratio; } else if (ratioW <= 1 && ratioH > 1) { var ratio = 1 / ratioH; width *= ratio; height *= ratio; } else if (ratioW >= 1 && ratioH >= 1) { var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH); width *= ratio; height *= ratio; } return { width : width, height : height }; } 

Answer 16

这完全适合我一个可拖动的项目 – aspectRatio：true

 .appendTo(divwrapper).resizable({ aspectRatio: true, handles: 'se', stop: resizestop })