• 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);
            }
        });
  • 相关阅读:
    Monkeyrunner学习
    js判断字符串是否包含指定的字符
    Asp.net网站后台代码不能访问-iis部署
    css分割线 文字居中的7种实现方式
    css倒三角的几种实现方式
    前端一键切图
    html中em和px
    js日期控件demo
    网页字体样式
    html特殊符号列表
  • 原文地址:https://www.cnblogs.com/pipizhu/p/1629686.html
Copyright © 2020-2023  润新知