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'})
        }
    }
  • 相关阅读:
    JavaScript Date 对象
    javascript Array类型 方法大全
    Flexbox
    CSS 去除浏览器默认 轮廓外框
    多行文本溢出显示省略号(…) text-overflow: ellipsis
    最全CSS3选择器
    何时使用 Em 与 Rem
    前端笔试面试题
    oracle中 lob类型
    MySQL 5.5.62 安装方法(标准配置版)
  • 原文地址:https://www.cnblogs.com/cy1121/p/9555019.html
Copyright © 2011-2022 走看看