图片完美缩放

2016-02-19 12:24 32 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享图片完美缩放吧。

【 tulaoshi.com - Web开发 】

在公司的工作经常要为客户作产品展示的页面,由于客户上传的图片格式大小不一,缩放后会导致变形,于是在星期天抽了点时间,写了一段JS代码,支持图片的完美缩放。
首先给图片加个div/div标签对,img中不能定义高度或宽度,如下:
div class="product_img_div"img src="images/test.jpg" class="product_img" //div 在CSS中写入代码:.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制图片载入时,溢出部分隐藏,这样就不会把界面撑得太难看。
代码如下:

ReSizeImg("product_img",200,180);
function ReSizeImg(cName,w,h){
    var reImgs = document.getElementsByTagName("img");
    for (j=0;jreImgs.length;j++){
        if (reImgs[j].className==cName && (reImgs[j].heighth || reImgs[j].widthw)) {
            if (reImgs[j].height==reImgs[j].width) {
                reImgs[j].height=h;reImgs[j].width=w;
            } else if (reImgs[j].heightreImgs[j].width) {
                reImgs[j].height=h;
            } else if (reImgs[j].heightreImgs[j].width){
                reImgs[j].width=w;
            }
        }
    }
}

测试后,图片大小完美缩放,也解决了在载入时会把界面撑得很难看的问题。

来源:http://www.tulaoshi.com/n/20160219/1600804.html

延伸阅读
标签: 浏览器
ie浏览器怎么开启图片缩放比例功能   在windows系统,如果我们电脑中没有安装图片预览工具时,通常情况下默认使用IE浏览器打开图片,但是如果用户所打开的图片大小超过了电脑显示器的大小,那么我们无法再显示器中无法看到完整的图像,这时就需要用到IE浏览器中的图像调整功能了,从而实现图片自动缩放的功能,那么如何在IE浏览器中设...
标签: Web开发
  1using System;   2using System.Data;   3using System.Configuration;   4using System.Web;   5using System.Web.Security;   6using System.Web.UI;   7using System.Web.UI.WebControls;   8using System.Web.UI.WebControls.WebParts;   9using Sys...
标签: Web开发
示例地址:Canvas Resize Demo 原文作者:Dr. Tom Trenka 原文日期: 2013年8月6日 翻译日期: 2013年8月8日 Tom Trenka 能为"我"的博客写一篇文章,对我来说是一个巨大的荣誉。Tom是Dojo框架的最初贡献者之一,也是我在SitePen公司的良师益友.我见证了他最顶级的天才能力,并且他总是第一个以前瞻性的解决方案预见了很多棘手的问...
一、知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过...
本文主要讲解利用android中Matrix控制图形的旋转缩放移动,具体参见一下代码: 代码如下: /**  * 使用矩阵控制图片移动、缩放、旋转  */  public class CommonImgEffectView extends View {      private Context context ;      private Bitmap mainBmp , controlBmp ;  ...

经验教程

337

收藏

99
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部