Jquery调整图像大小
Posted
技术标签:
【中文标题】Jquery调整图像大小【英文标题】：Jquery resizing image 【发布时间】：2010-11-11 17:25:45 【问题描述】：我想开始讨论使用 jQuery 调整图像大小。
这是我的贡献：但我认为我离解决方案还很远。 种地怎么办？ 谁能帮帮我？
$(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
);
);
【问题讨论】：
你知道为什么这不适用于var maxWidth = $(document).width();。看看：jsfiddle.net/KHdZG/16
由于 jQuery/javascript 在客户端运行，如果服务器上的文件为 2 MB，浏览器仍然需要下载完整的 2 MB 才能渲染 100x100 图像。对吗？
【参考方案1】：
几个建议：
将此函数设为可以传入最大或最小尺寸的函数，而不是对其进行硬编码；这将使其更可重用 如果您使用 jQuery 的.animate 方法，例如 .animate(width: maxWidth)，它应该会自动为您缩放其他维度。
【讨论】：
使用 jQuery .animate 方法只能让您按一维进行缩放。换句话说，我无法设置 maxWidth 和 maxHeight。 @davekaro - 来自文档：“例如，我们可以同时为宽度和高度设置动画......”api.jquery.com/animate 像这样使用 .animate() 很好，完全没有意识到它应该缩放另一个维度 - 保持适合您的纵横比。【参考方案2】：伟大的开始。这是我想出的：
$('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
);
);
这样做的好处是允许您指定宽度和高度，同时允许图像仍然按比例缩放。
【讨论】：
【参考方案3】：您需要在第一个条件后重新计算宽度和高度。这是整个脚本的代码：
$(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
);
【讨论】：
你忘了用 ); 关闭外部函数； 为什么要在 if 块的最后几行设置高度和宽度？在您执行height = height * ratio; 之后，您是否在if 块之外用var height = $(this).height(); 覆盖它？谢谢。【参考方案4】：
$(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
);
);
【讨论】：
作为一项规则，请始终添加一些文字来解释您所做的更改以及更改的原因。不要强迫读者比较每一行，看看你做了什么改变，并猜测为什么你的改变更好。【参考方案5】：$(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 的每个人带来神奇的效果。确保您正确设置了选择器（我使用了 $('img') 但在您的情况下可能会有所不同）。这仅适用于横向模式。但是如果你看一下，只需要做一些事情就可以将其设置为纵向，也就是如果 img.height() > maxHeight) 的东西
【讨论】：
图像大小在加载完成后可用，所以我将上面的代码与这个结合使用，效果很好：***.com/a/3877079/733749【参考方案6】：$(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
);
);
【讨论】：
这里有一些解释会很好 有cmets..不需要解释..很好的解决方案 Miehz :)【参考方案7】：根据 Nathan 的建议，修改 Aleksandar 的答案，使其成为 jquery 插件并接受 maxwidth 和 maxheight 作为参数。
$.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);
【讨论】：
【参考方案8】：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:(w-w)+20,minHeight:(h-h)+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);
);
【讨论】：
【参考方案9】：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>
【讨论】：
【参考方案10】：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 src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
</div>
</div>
【讨论】：
【参考方案11】：还有旧帖子……有点静止。调整大小是一回事，但它会使调整大小的图像不居中，看起来有点杂乱无章。所以我在原始帖子中添加了几行以添加左边距以集中任何调整大小的图像。
$(".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);
);
【讨论】：
【参考方案12】：这里有这么多代码，但我认为这是最好的答案
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);
;
【讨论】：
【参考方案13】：您可以使用这段代码调整图像大小
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));
);
【讨论】：
【参考方案14】：您可以使用 aeimageresize jquery 插件来做到这一点。
https://plugins.jquery.com/ae.image.resize
https://github.com/adeelejaz/jquery-image-resize
$(function()
$( ".resizeme" ).aeImageResize( height: 250, width: 250 );
);
【讨论】：
以上是关于Jquery调整图像大小的主要内容，如果未能解决你的问题，请参考以下文章