//用 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. topcoder srm 545 div1

    problem1 link 这个可以贪心地从前向后构造.假设当前已经的字符串为$S$,对于一个字符$c$来说,设将$c$加到$S$后得到的新串为$S^{'}$.那么如果$X+Y+Z \ge minIn ...

  2. uniGUI试用笔记(八)

    在业务系统中常常使用回车键(Enter)替代Tab键完成焦点跳转,在uniGUI下,可以不用代码,直接使用TUniForm的NavigateKeys进行设置: 其中Next和Prior决定了焦点向下一 ...

  3. 快速自动安装dart

    @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat Non ...

  4. php知识点-1

    global 是在函数内部 声明一个 函数外部的变量(即所谓的全局变量, 而所谓的超全局变量是指 像 $_POST, $GLOBALS等之类的自动系统变量) 的一个别名. 在函数内部使用 unset( ...

  5. HIHOcoder 1449 后缀自动机三·重复旋律6

    思路 显然endpos的大小就对应了对应子串的出现次数,所以快速求出endpos的大小,然后用它更新对应子串长度(minlen[i]~maxlen[i])的答案即可 endpos的大小可以拓扑排序求出 ...

  6. 比赛总结——牛客网 NOIP赛前集训营提高组模拟第一场

    第一场打的很惨淡啊 t1二分+前缀最小值没想出来,20分的暴力也挂了,只有10分 t2数位dp,调了半天,结果因为忘了判0的特殊情况WA了一个点,亏死 t3emmmm.. 不会 imone说是DSU ...

  7. (转载)C#语言开发规范

    1.  命名规范a) 类[规则1-1]使用Pascal规则命名类名,即首字母要大写.eg:Class Test{...}[规则1-2]使用能够反映类功能的名词或名词短语命名类.[规则1-3]不要使用“ ...

  8. Kubernetes之容器

    Images You create your Docker image and push it to a registry before referring to it in a Kubernetes ...

  9. Footnotes for tables in latex - 为latex的table加上footnotes

    参考: Footnotes for tables in LaTeX Footnote in tabular environment Footnotes for tables in latex - 为l ...

  10. python学习 day016打卡 面向对象--成员

    本节主要内容: 1.类的成员 2.类的成员-变量 3.类的成员-方法 4.类的成员-属性 5.私有 一.类的成员: 能在类中写的内容就是类的成员. class 类名: #方法 def __init__ ...