zoukankan      html  css  js  c++  java
  • 图片裁剪

    function img_adaption(img) {
        if (!$(img).hasClass('img_adapted')) {
            $(img).css({'display''none'});
            var originalWidth = $(img).width();
            var originalHeight = $(img).height();
            var parentWidth = $(img).parent().width();
            var parentHeight = $(img).parent().height();
            var originalScale = originalWidth / originalHeight;
            var parentScal = parentWidth / parentHeight;
            var scaleNum, newImgWidth;
            var newImgHeight = 0;
            var changeNum = 0;
            if ($(img).parent().css('position') == 'static') {
                $(img).parent().css({
                    'position''relative',
                    'overflow''hidden'
                })
            }
            if (originalScale > parentScal) {
                scaleNum = originalHeight / parentHeight;
                newImgWidth = originalWidth / scaleNum;
                changeNum = (newImgWidth - parentWidth) / 2;
                $(img).css({
                    'width''auto',
                    'height': parentHeight,
                    'margin-left': -changeNum,
                    'display''block',
                    'border-radius''0'
                });
                $(img).fadeIn();
            else if (originalScale < parentScal) {
                scaleNum = originalWidth / parentWidth;
                newImgHeight = originalHeight / scaleNum;
                changeNum = (newImgHeight - parentHeight) / 2;
                $(img).css({
                    'width': parentWidth,
                    'height''auto',
                    'margin-top': -changeNum,
                    'display''block',
                    'border-radius''0'
                });
                $(img).fadeIn();
            else {
                $(img).css({
                    'width''100%',
                    'height''100%',
                    'display''block'
                });
                $(img).fadeIn();
            }
     
            $(img).addClass('img_adapted');
        else {
            $(img).css({'display''block'})
        }
    }
  • 相关阅读:
    Diameter 消息格式解析
    我们活成了不想的样子
    《活着》片段
    我的庚子年
    <<甄嬛传>>后感
    对于根目录磁盘满的了问题
    phpstorm注册账号
    mac安装nginx
    samba文件共享及账户映射
    我们的读书会
  • 原文地址:https://www.cnblogs.com/cy1121/p/9555019.html
Copyright © 2011-2022 走看看