jQuery调整宽高比

如何将jQuery中的图像调整为一致的宽高比。 例如，设置最大高度并正确调整宽度。 谢谢。

Answer 1

你可以手动计算，

即：

function GetWidth(newHeight,orginalWidth,originalHeight) { if(currentHeight == 0)return newHeight; var aspectRatio = currentWidth / currentHeight; return newHeight * aspectRatio; } 

确保使用图像的ORIGINAL值，否则它会随着时间的推移而降级。

编辑：示例jQuery版本（未测试）

 jQuery.fn.resizeHeightMaintainRatio = function(newHeight){ var aspectRatio = $(this).data('aspectRatio'); if (aspectRatio == undefined) { aspectRatio = $(this).width() / $(this).height(); $(this).data('aspectRatio', aspectRatio); } $(this).height(newHeight); $(this).width(parseInt(newHeight * aspectRatio)); } 

Answer 2

这是一个有用的function，可以做你想要的：

 jQuery.fn.fitToParent = function() { this.each(function() { var width = $(this).width(); var height = $(this).height(); var parentWidth = $(this).parent().width(); var parentHeight = $(this).parent().height(); if(width/parentWidth < height/parentHeight) { newWidth = parentWidth; newHeight = newWidth/width*height; } else { newHeight = parentHeight; newWidth = newHeight/height*width; } var margin_top = (parentHeight - newHeight) / 2; var margin_left = (parentWidth - newWidth ) / 2; $(this).css({'margin-top' :margin_top + 'px', 'margin-left':margin_left + 'px', 'height' :newHeight + 'px', 'width' :newWidth + 'px'}); }); }; 

基本上，它抓取一个元素，将其置于父级中心，然后将其拉伸以适应父级的背景都不可见，同时保持宽高比。

然后，这可能不是你想要做的。

Answer 3

使用JQueryUI Resizeable

 $("#some_image").resizable({ aspectRatio:true, maxHeight:300 }); 

aspectRatio：true – >保持原始宽高比

Answer 4

没有计算复制和粘贴的数量呃！ 我也想知道这一点，我看到的只是缩放宽度或高度的无数例子..谁会想要另一个溢出？！

• 调整宽度和高度，无需循环
• 不超过图像原始尺寸
• 使用正常工作的数学，即高度的宽度/宽高度，以及宽度的高度*宽高比，因此图像实际上可以上下缩放：/

应该直截了当地转换为javascript或其他语言

//////////////

 private void ResizeImage(Image img, double maxWidth, double maxHeight) { double srcWidth = img.Width; double srcHeight = img.Height; double resizeWidth = srcWidth; double resizeHeight = srcHeight; double aspect = resizeWidth / resizeHeight; if (resizeWidth > maxWidth) { resizeWidth = maxWidth; resizeHeight = resizeWidth / aspect; } if (resizeHeight > maxHeight) { aspect = resizeWidth / resizeHeight; resizeHeight = maxHeight; resizeWidth = resizeHeight * aspect; } img.Width = resizeWidth; img.Height = resizeHeight; } 

Answer 5

如果您在裁剪后需要完美的高度和宽度宽高比，这将是一个很好的解决方案，它将提供完美的裁剪比率

 getPerfectRatio(img,widthRatio,heightRatio){ if(widthRatio < heightRatio){ var height = img.scalingHeight - (img.scalingHeight % heightRatio); var finalHeight = height var finalWidth = widthRatio * (height/heightRatio); img.cropHeight = finalHeight; img.cropWidth = finalWidth } if(heightRatio < widthRatio){; var width = img.scalingWidth - (img.scalingWidth % widthRatio); var finalWidth = width; var finalHeight = heightRatio * (width/widthRatio); img.cropHeight = finalHeight; img.cropWidth = finalWidth } return img }