Article Detail

jquery设置图片等比缩放取中间

function setImgSizeLoad(e){ var img = $(e); var div = $(" "); img.parent().appen...

HTML 阅读 20.3万 4 分钟阅读 2015-12-21 17:24
GDScript3
47 行
function setImgSizeLoad(e){
    var img = $(e);
    var div = $("<div></div>");
    img.parent().append(div);
    div.append(e);
    //获取限制容器的长宽。
    var maxWidth = img.parent().parent().width();
    if(maxWidth == 0){
        maxWidth = img.width();
    }
    var maxHeight = img.parent().parent().height();
    if(maxHeight == 0){
        maxHeight = img.height();
    }

    //设置容器的长宽。和样式
    div.width(maxWidth+"px");
    div.height(maxHeight+"px");
    div.css("overflow","hidden");
    div.css("background-color","gray");
    //解除图片的长宽限制
    img.height("auto");
    img.width("auto");
    var imgWidth = img.height();
    var imgHeight = img.height();
    //如果图片的长和宽大于现在的长宽就进行缩放
    if(img.width() > maxWidth && img.height() > maxHeight){
        img.width(maxWidth+"px");
        if(img.height() < maxHeight){
            img.width("auto");
            img.height(maxHeight+"px");
        }
    }
    img.css("margin-left",(maxWidth - img.width())/2 +"px");
    img.css("margin-top",(maxHeight - img.height())/2 +"px");
}

function setImgSize(e){
    var timer = setInterval(function(){
        if(e.complete){
            setImgSizeLoad(e)
            clearInterval(timer);
        }else{
            alert("aaaa");
        }
    },50)
};
Comments 评论区
评论区 当前文章还没有公开评论
Comment Form 留下评论
正在回复 #0
粘贴图片、拖拽文件,或点上面的按钮上传 图片会自动插入 [img] 标签,其他附件会自动插入 [attach] 标签。
正在上传...
提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称;reply 会生成一条带楼层回链的新评论,quote 会附带完整引用块,并保持评论锚点跳转。

lizhenqiu blog is powered by lizhenqiu.com Version 6.9

Processed in 0.0069 second(s) W3C

本博客的所有原创作品采用 知识共享 署名-非商业性使用-相同方式共享 2.5 协议 进行许可

本站由 七七牛 云存储 阿阿里云 计算与安全服务 拍又拍云 CDN 加速 百百度智能 AAMH 布布集网 AI指南针AI

桂公网安备 45010302000998号 桂ICP备15007619号-1 中国互联网举报中心 建议使用谷歌浏览器浏览
Navigation 文章导航
⌂ ↓ ↑
100%
图片预览
Gallery 图集
0 张图片

正在整理正文和评论里的图片。

当前页还没有可展示的图片。
Quick Comment 快速评论

直接输入内容,提交时仍会走当前页面的人机验证。

正在上传...
操作提示