//用 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. Python3 tkinter基础 Frame event.x 输出鼠标左右键点击的位置

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  2. 旅行商问题【山财新生赛E】

    链接:https://ac.nowcoder.com/acm/contest/547/E 来源:牛客网 题目描述 旅行商来到了一个新的国家,这个国家有N个城市,他们直接由N-1条道路相连接,每条道路的 ...

  3. POJ1741 Tree(树分治——点分治)题解

    题意:给一棵树,问你最多能找到几个组合(u,v),使得两点距离不超过k. 思路:点分治,复杂度O(nlogn*logn).看了半天还是有点模糊. 显然,所有满足要求的组合,连接这两个点,他们必然经过他 ...

  4. Directional RNA-seq data -which parameters to choose?

    Directional RNA-seq data -which parameters to choose? REF: https://chipster.csc.fi/manual/library-ty ...

  5. P3244 [HNOI2015]落忆枫音

    思路 给出了一个DAG,要求以1为根的外向树的个数 如果没有加边的条件,就非常好做 每个点都只保留一条入边,最后得到的一定就是一个符合条件的树了(因为给了一个DAG啊) 所以答案是\(\prod_{i ...

  6. 【Hadoop 分布式部署 五:分布式部署之分发、基本测试及监控】

    1.对  hadoop 进行格式化 到  /opt/app/hadoop-2.5.0  目录下 执行命令:    bin/hdfs namenode -format 执行的效果图如下  (  下图成功 ...

  7. java核心问题总结

    Java 核心概念 equals 与 hashCode 的异同点在哪里?Java 的集合中又是如何使用它们的. Math.Integer.Double等这些封装类在使用equals()方法时,已经覆盖 ...

  8. 在 JSDOM v11 中使用jQuery

    在JSDOM v11中使用jQuery 从v10开始,jsdom提供了更灵活的API. https://swashata.me/blog/use-jquery-jsdom-v11/ const tes ...

  9. 解析Django路由层URLconf

    目录: 一  Django中路由的作用 二  路由的分组 三  路由分发 四  反向解析 五  名称空间 六  Django2.0版的path 一.Django中路由的作用 URL配置(URLconf ...

  10. oracle批量删除某用户下的表

    昨天干了一天的体力活,到快下班时被要求删除一批测试库上错误的表,主要是这些表的字段和生产上字段顺序对不上,然后让我写个脚本,让dba执行一下,主要是删表这种东西我们都没权限. 然后,我就被难到了,我记 ...