Heim > Web-Frontend > js-Tutorial > 关于图片按比例自适应缩放的js代码_图象特效

关于图片按比例自适应缩放的js代码_图象特效

WBOY
Freigeben: 2016-05-16 18:00:09
Original
1079 Leute haben es durchsucht

如下图。

图片自适应缩放

瞄了一下,居中可以用 text-align:center; 来实现。而按比例缩放,利用预设 关于图片按比例自适应缩放的js代码_图象特效 的 width 、height 属性解决不了。因为用户图片可能是很长的,也可能是很宽的。在线上想了一下他们的关系,按条件来判断是这样的:

复制代码 代码如下:

if(实际宽度 > 预览最大宽度) {
缩放宽度 = 预览最大宽度
}

if(实际高度 > 预览最大高度) {
缩放高度 = 预览最大高度
}

但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图片就不是按比例缩放,会变得非常丑。为了让它按比例缩放,就需要做各种判断了。那这样就违背了我们希望程序自动化的原则了。再想想,虽然不喜欢数学,但数学还是很好用的,应该有其他办法。而既然是按比例缩放,何不用实际图像和预览区域宽度作的比例来计算他们关系?hmmmm… 果然 OK。实际上我们永远都只需要缩放宽度或高度中的其中一个。因为比例只有大和小种情况。具体的,写一个函数来实现它吧:
复制代码 代码如下:

/**
* 图片按比例自适应缩放
* @param img {Element} 用户上传的图片
* @param maxWidth {Number} 预览区域的最大宽度
* @param maxHeight {Number} 预览区域的最大高度
*/

var resizeImg = function(img, maxWidth, maxHeight){
var w = img.width,
h = img.height;

// 当图片比预览区域小时不做任何改变
if(w
// 当实际图片比例大于预览区域宽高比例时
// 缩放图片宽度,反之缩放图片宽度
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight;
};

完整的测试代码:
复制代码 代码如下:





图片按比例自适应缩放




<script> <BR>window.onload = function() { <BR>var img = document.getElementById('img'), <BR>/** <BR>* 图片按比例自适应缩放 <BR>* @param img {Element} 用户上传的图片 <BR>* @param maxWidth {Number} 预览区域的最大宽度 <BR>* @param maxHeight {Number} 预览区域的最大高度 <BR>*/ <BR>resizeImg = function(img, maxWidth, maxHeight){ <BR>var w = img.width, <BR>h = img.height; <BR>// 当图片比预览区域小时不做任何改变 <BR>if(w < maxWidth && h < maxHeight) return; <BR>// 当实际图片比例大于预览区域宽高比例时 <BR>// 缩放图片宽度,反之缩放图片宽度 <BR>w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight; <BR>}; <BR>resizeImg(img, 500, 300); <BR>} <BR></script>


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage