图片完美缩放

炀三郎

炀三郎

2016-02-19 12:24

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享图片完美缩放吧。
在公司的工作经常要为客户作产品展示的页面,由于客户上传的图片格式大小不一,缩放后会导致变形,于是在星期天抽了点时间,写了一段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;
            }
        }
    }
}

测试后,图片大小完美缩放,也解决了在载入时会把界面撑得很难看的问题。
展开更多 50%)
分享

猜你喜欢

图片完美缩放

Web开发
图片完美缩放

图片按比例缩放函数

Web开发
图片按比例缩放函数

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

onmousewheel event 缩放图片效果

Web开发
onmousewheel event 缩放图片效果

CSS控制图片成比例缩放

Web开发
CSS控制图片成比例缩放

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

关于图片按比例自适应缩放

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
关于图片按比例自适应缩放

用CSS等比例缩放图片

Web开发
用CSS等比例缩放图片

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

体验有道云笔记照片中转站

体验有道云笔记照片中转站

浅谈C++三层架构

浅谈C++三层架构
下拉加载更多内容 ↓