jquery调整图像

我想开始讨论一下使用jQuery调整图片的大小。

这是我的贡献：但我觉得我离解决scheme很远。 那种庄稼呢？ 谁能帮我？

$(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 } // 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 } }); 

}）;

Answer 1

第一个条件之后，您需要重新计算宽度和高度。 这是整个脚本的代码：

 $(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 } var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // 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 } }); 

Answer 2

几点build议：

• 使这个function可以传递最大或最小尺寸，而不是硬编码; 这将使其更加可重用
• 如果您使用jQuery的.animate方法，如.animate({width: maxWidth}) ，它应该为您自动缩放另一个尺寸。

Answer 3

伟大的开始。 以下是我想到的：

 $('img.resize').each(function(){ $(this).load(function(){ var maxWidth = $(this).width(); // Max width for the image var maxHeight = $(this).height(); // Max height for the image $(this).css("width", "auto").css("height", "auto"); // Remove existing CSS $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height if(width > height) { // Check if the current width is larger than the max if(width > maxWidth){ var 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 } } else { // Check if current height is larger than max if(height > maxHeight){ var 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 } } }); }); 

这有利于允许您指定宽度和高度，同时允许图像按比例缩放。

Answer 4

看看Jcrop。 我用它，这是非常好的。

http://deepliquid.com/content/Jcrop.html

Answer 5

 $(function() { $('.mhz-news-img img').each(function() { var maxWidth = 320; // Max width for the image var maxHeight = 200; // Max height for the image var maxratio=maxHeight/maxWidth; var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height var curentratio=height/width; // Check if the current width is larger than the max if(curentratio>maxratio) { 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 } else { 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 } }); }); 

Answer 6

 $(document).ready(function(){ $('img').each(function(){ var maxWidth = 660; var ratio = 0; var img = $(this); if(img.width() > maxWidth){ ratio = img.height() / img.width(); img.attr('width', maxWidth); img.attr('height', (maxWidth*ratio)); } }); }); 

这将为大家使用最新的jquery做魔术。 确保你的select器是正确的（我使用$（'img'），但是在你的情况下可以不同）。 这只适用于风景模式。 但是，如果你看它，只需要做一些事情来设置它的肖像，又名，如果img.height（）> maxHeight）的东西

Answer 7

 $(function() { $('.story-small img').each(function() { var maxWidth = 100; // Max width for the image var maxHeight = 100; // 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 && 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 } else if(height>width && 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 } }); }); 

Answer 8

CSS：

 .imgMaxWidth { max-width:100px; height:auto; } .imgMaxHeight { max-height:100px; width:auto; } 

HTML：

 <img src="image.jpg" class="imageToResize imgMaxHeight" /> 

jQuery的：

 <script type="text/javascript"> function onLoadF() { $('.imageToResize').each(function() { var imgWidth = $(this).width(); if (imgWidth>100) { $(this).removeClass("imgMaxHeight").addClass("imgMaxWidth"); } }); } window.onload = onLoadF; </script> 

Answer 9

您可以使用这段代码调整图像大小

  var maxWidth = 600; $("img").each(function () { var imageWidth = $(this).width(); var imageHeight = $(this).height(); if (imageWidth > maxWidth) { var percentdiff = (imageWidth - maxWidth) / imageWidth * 100; $(this).width(maxWidth); $(this).height(imageHeight - (imageHeight * percentdiff / 100)); } }); 

Answer 10

修改Aleksandar的答案，使其作为jquery插件，并接受maxwidth和maxheight作为参数，由内森build议。

 $.fn.resize = function(maxWidth,maxHeight) { return this.each(function() { var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; } }); }; 

用作$('.imgClass').resize(300,50);

Answer 11

 function resize() {resizeFrame(elemento, margin);}; jQuery.event.add(window, "load", resize); jQuery.event.add(window, "resize", resize); function resizeFrame(item, marge) { $(item).each(function() { var m = marge*2; var mw = $(window).width()-m; var mh = $(window).height()-m; var w = $('img',this).width(); var h = $('img',this).height(); var mr = mh/mw; var cr = h/w; $('img',this).css({position:'absolute',minWidth:(ww)+20,minHeight:(hh)+20,margin:'auto',top:'0',right:'0',bottom:'0',left:'0',padding:marge}); if(cr < mr){ var r = mw/w; $('img',this).css({width: mw}); $('img',this).css({height: h*r}); }else if(cr > mr){ var r = mh/h; $('img',this).css({height: mh}); $('img',this).css({width: w*r}); } }); } 

Answer 12

和旧的post…还是有点。 resize是一回事，但它可以不经过resize的图像，看起来有点无组织。 所以我在原文中增加了几行来添加一个左边距来集中resize的图像。

 $(".schs_bonsai_image_slider_image").each(function() { var maxWidth = 787; // Max width for the image var maxHeight = 480; // 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 } var newwidth = $(this).width(); var parentwidth=$(this).parent().width(); var widthdiff=(parentwidth-newwidth)/2; $(this).css("margin-left",widthdiff); }); 

Answer 13

这么多代码，但我认为这是最好的答案

 function resize() { var input = $("#picture"); var maxWidth = 300; var maxHeight = 300; var width = input.width(); var height = input.height(); var ratioX = (maxWidth / width); var ratioY = (maxHeight / height); var ratio = Math.min(ratioX, ratioY); var newWidth = (width * ratio); var newHeight = (height * ratio); input.css("width", newWidth); input.css("height", newHeight); }; 

Answer 14

imgLiquid （一个jQuery插件）似乎做你所要求的。

演示：
http://goo.gl/Wk8bU

JsFiddle例子：
http://jsfiddle.net/karacas/3CRx7/#base

使用Javascript

 $(function() { $(".imgLiquidFill").imgLiquid({ fill: true, horizontalAlign: "center", verticalAlign: "top" }); $(".imgLiquidNoFill").imgLiquid({ fill: false, horizontalAlign: "center", verticalAlign: "50%" }); }); 

HTML

 <div class="boxSep" > <div class="imgLiquidNoFill imgLiquid" style="width:250px; height:250px;"> <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/> </div> </div>