zoukankan      html  css  js  c++  java
  • jquery控制图片按比例缩放

    $(function() {
            
    var boxWidth = 675;
            
    var boxHeight = 450;
            
    var imgWidth = $("#img1").width();
            
    var imgHeight = $("#img1").height();
            
    //比较imgBox长宽比img长宽比
            if ((boxWidth / boxHeight) >= (imgWidth / imgHeight)) {
                
    //重新设置imgwidthheight
                $("#img1").width((boxHeight * imgWidth) / imgHeight);
                $(
    "#img1").height(boxHeight);
                
    //让图片居显示
                var margin = (boxWidth - $("#img1").width()) / 2;
                $(
    "#img1").css("margin-left", margin);
            }
            
    else {
                
    //重新设置imgwidthheight
                $("#img1").width(boxWidth);
                $(
    "#img1").height((boxWidth * imgHeight) / imgWidth);
                
    //让图片居显示
                var margin = (boxHeight - $("#img1").height()) / 2;
                $(
    "#img1").css("margin-top", margin);
            }
        });
  • 相关阅读:
    天大复试机试练习_003
    C++随手记--字符串转数字
    C++标准库STL 之 我觉得应该有的方法——split
    apt-get 详解&&配置阿里源
    Nginx 图文详解
    MySQL数据库管理常用命令小结
    oracle数据库备份
    SqlServer数据库备份还原步骤
    mysql数据备份与恢复
    Tomcat架构
  • 原文地址:https://www.cnblogs.com/pipizhu/p/1629686.html
Copyright © 2011-2022 走看看