//用 JS 设置图片的最大宽度
    function setImgsMaxWidth() {
        $('.answerimg img').each(function () {
            $(this)[0].onload = function () {
                var maxWidth = 1100; // 图片最大宽度
                var ratio = 0;  // 缩放比例
                var width = $(this).width();    // 图片实际宽度
                var height = $(this).height();  // 图片实际高度

// 检查图片是否超宽
                if (width > maxWidth) {
                    ratio = maxWidth / width;   // 计算缩放比例
                    $(this).css("width", maxWidth); // 设定实际显示宽度
                    height = height * ratio;    // 计算等比例缩放后的高度  
                    $(this).css("height", height);  // 设定等比例缩放后的高度
                }
            }
        })
    }

用 JS 设置图片的最大宽度的更多相关文章

  1. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  2. JS获取图片的原始宽度和高度,兼容IE7,8

    naturalWidth和naturalHeight 可以直接获取img的原始宽高,而innerHight,innerWith只是获取图片所占容器盒子的宽高. // 封装function getNat ...

  3. 纯css设置元素高度与宽度相等

    设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...

  4. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  5. js和jquery获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...

  6. 如何通过js和jquery获取图片真实的宽度和高度

    什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...

  7. JS等比例缩放图片,限定最大宽度和最大高度

    JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ ...

  8. JS 判断图片尺寸大小,以便页面resize时,动态调整页面元素位置

    ){ clearInterval(global_timename4pool); } } //由于无法判断图片显示完整的时机,只好用定时器来做,计算完成后再关掉定时器. global_timename4 ...

  9. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

随机推荐

  1. phpcms9-6-0 一键getshell工具

    介绍 一键化python 1.py http://xxx.com,如果是批量直接运行py文件即可 待办 [] 加入对有验证码phpcms网站的支持 [] 加入批量(已完成) 说明 依赖库的安装pip ...

  2. iis默认文档有什么用?

    设置默认文档就是指在只输入路径,不输入具体网页名的时候,浏览器显示的默认网页名称. 比如说,服务器地址:http://123.xxx.com,在未设置默认文档的时候或指定的默认文档不存在时,要正常访问 ...

  3. Asp.Net 之 OnClientClick 与 OnClick 的执行顺序

    Asp.net 中 OnClientClick 与 OnClick 的执行顺序为:客户端的OnClientClick先执行,服务器端的OnClick后执行. 拓展:在执行完客户端的OnClientCl ...

  4. IDEA入门及maven配置

    idea基本使用 下载安装 idea下载地址 激活方法 上面的失效使用这个 配置SDKs和编译版本 选择jdk 我是主要用于Java开发,因此配置JDK8 配置编码 其他配置 个人配置主题等 注意 与 ...

  5. Symbol在对象中的作用

    Symbol的打印 我们先声明一个Symbol,然后我们在控制台输出一下. var g = Symbol('jspang'); console.log(g); console.log(g.toStri ...

  6. 洛谷P2362 围栏木桩----dp思路

    在翻dp水题的时候找到的有趣的题0v0 原文>>https://www.luogu.org/problem/show?pid=2362<< 题目描述 某农场有一个由按编号排列的 ...

  7. 【转载】EclEmma工具介绍

    https://wenku.baidu.com/view/1017567e5acfa1c7aa00cc5f.html https://www.ibm.com/developerworks/cn/rat ...

  8. [从零开始搭网站四]CentOS配置Tomcat

    点击下面连接查看从零开始搭网站全系列 从零开始搭网站 上一章带大家配置了JDK,那么现在就要来配置Tomcat容器了. 1:去 http://tomcat.apache.org/download-90 ...

  9. Codeforces 776E The Holmes Children

    题目链接:http://codeforces.com/problemset/problem/776/E ${\because gcd(i,n-i)=1\Leftrightarrow gcd(i,n)= ...

  10. Hadoop 学习路线

    大数据实时计算工程师/Hadoop工程师/数据分析师职业路线图 描述 本路线图是一个专门针对大数据实时处理.Hadoop工程师和数据分析师所设计的课程体系介绍,在实时计算方向主要包括了从数据收集框架. ...