//用 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. 如何合并ts文件?

    答: 使用ffmpeg工具,使用方法如下: ffmpeg -i <m3u8 file name> <output file name> 注意:要先将m3u8文件中描述的ts文件 ...

  2. bozoj3131: [Sdoi2013]淘金 数位dp

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3131 思路 1. 函数值的素因子只有2.3.5.7 由他们组成的状态不多,爆搜的时候即使搜不 ...

  3. MySQL主主复制、主从复制

    意思: 主机A上有mysql1,主机B上有mysql2,mysql1新建库D,则mysql2也新建库D,mysql1原有库A.B.C,mysql2也原有库A.B.C,总之mysql1和mysql2一样 ...

  4. IDEA 入门

    IDEA初步使用 IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾 IntelliJ IDEA 设置代码提示或自动补全的快捷键 (Alt+/) IntelliJ IDEA 配 ...

  5. 题解—— 洛谷 p1269 信号放大器(贪心)

    深刻的教训,不要写错读入 #include <cstdio> #include <algorithm> using namespace std; ; ; ,u[MAXM],v[ ...

  6. Java基础 【类之间的关系】

    在Java与其他面向对象设计语言中,类之间常见的关系有6种 分别是:  依赖.关联.聚合.组合.继承.实现,他们的耦合度依次增强. 其中,关联.聚合.组合关系仅仅是在语义上有所区别,所谓语义就是指上下 ...

  7. JVM 及 垃圾回收机制原理

    JVM Java 虚拟机 Java 虚拟机(Java virtual machine,JVM)是运行 Java 程序必不可少的机制.JVM实现了Java语言最重要的特征:即平台无关性.原理:编译后的 ...

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

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

  9. C语言 分割字符串

    对指针的操作有点迷糊 只好采用下面一些比较low的手段 char str[100]; char delims[] = ";"; char *result = NULL; sprin ...

  10. gitlab git

    git网站是进不去的需要加权限才能进去!!!!!!!! 登录进去后 ssh-keygen -t rsa -C "gitlab用户名一般是邮箱" 一路设置好 Use the code ...