jquery批量控制图片大小高度取整数

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-08-23 15:34:57　-　阅:　-　评:0　-　积分:0

网页制作中有时我们需要对大图片进行控制宽高度，一两个的话直接手写就可以了，但要是多的话，手写就太麻烦了，最简单的就是用jquery或js来进行批量控制。下面以自己网站文章内容页的图片来进行举例说明。

拿二级导航横向下拉菜单文章中的图片来说吧，如图：
图片原大小是：1366*100的，这里我限制了图片的最大宽度是：740，同时也给高度做了限制，具体的写法如下。

jquery核心源码

<script>
$(function(){
$(".daima img").each(function(){
maxWidth =700; /*图片最大宽度*/
ratio = 0;      /*缩放比例 */
width = $(this).width(); /*图片实际宽度 */
height = $(this).height(); /*图片实际高度*/
if(width > maxWidth){/*如果图片实际宽度大于最大宽度时*/
ratio = maxWidth / width;
$(this).width(maxWidth); /*设定实际显示宽度 */
height = height * ratio; /*计算等比例缩放后的高度*/
$(this).height(height); /*设定等比例缩放后的高度*/
}});
});
</script>

带着注释一看，确实是实现了限制图片宽高度，但是会有一个小问题，也不是多严重，就是图片的高度小数点后面会有多位。怎么解决呢？当然是要取整数了，取整的话用“四舍五入”就行了。来看下四舍五入的公式：

取整(四舍五入)

Math.round(A/B)

下面来修改上面的代码，完整案例代码如下：

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery批量控制图片大小高度取整数--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="jquery批量控制图片大小,jquery取整数,jquery取余数的方法,jquery四舍五入">
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$(".daima img").each(function(){
maxWidth =700;
ratio = 0;
width = $(this).width();
height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).width(maxWidth);
height = height * ratio;
$(this).height(Math.round(height));
}});
});
</script>
</head>
<body>
<div class="daima">
<img src="/d/file/jquery/2013-10-15/二级导航横向下拉菜单.png" title="二级导航横向下拉菜单" >
</div>
</body>
</html>

再查看源码时则会看到高度已经没有那么多小数点了吧。如果不想四舍五入而是直接省略掉小数的话，可以使用下面这个取整公式：

取整

parseInt(A/B)

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-08-23/195.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！