//用 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. html的进一步了解(更新中···)

    (接上一次) 属性:表示事物的一些特征 属性又可分为两种: 标签属性和样式属性 两者的区别: 位置不一样 样式属性写在style中 标签属性写在标签内 写法不一样 样式属性是属性:属性值 标签属性是属 ...

  2. Netty实践与NIO原理

    一.阻塞IO与非阻塞IO Linux网络IO模型(5种) (1)阻塞IO模型 所有文件操作都是阻塞的,以套接字接口为例,在进程空间中调用recvfrom,系统调用直到数据包到达且被复制到应用进程缓冲区 ...

  3. 通过cmd调用Powershell脚本

    一共需要3个文件,把这3个文件放在一个路径下 UTF8NoBOM.bat   这个文件是为了调用ps1 pwsh -file "%cd%\UTF8NoBOM.ps1" UTF8No ...

  4. 题解——洛谷P3812【模板】线性基

    学了下线性基 使用好像并不复杂 打了板子 但是要注意位运算优先级 #include <cstdio> #include <algorithm> #include <cst ...

  5. (转载)Unity里实现更换游戏对象材质球

    在unity中本来想实现在一个背景墙上更换图片的功能 在网上查了一些资料说是用Image,但我是新手小白刚接触Unity不久好多组建还不会用,就想能不能通过改变游戏对象的材质球来更换游戏对象的背景. ...

  6. java.lang.OutOfMemoryError:GC overhead limit exceeded

    在调测程序时报java.lang.OutOfMemoryError:GC overhead limit exceeded 错误 错误原因:在用程序进行数据切割时报了该错误.由于在本地执行数据切割测试的 ...

  7. mybatis配置文件namespace用法总结

    本文为博主原创,未经允许不得转载: 由于在应用过程中,发现namespace在配置文件中的重要性,以及配置的影响,在网上看了很多博客,发现很多人对namespace存在误解, 所以总结一下namesp ...

  8. Linux下 网卡测速

    参考: How do I verify the speed of my NIC? Linux下 网卡测速 命令: $ sudo ethtool eth0 Settings for eth0: Supp ...

  9. template-web.js 引用变量、函数

    1.关键字   $imports.+变量/函数 {{if $imports.myParseInt(b.health_money)}} <span class="num"> ...

  10. vue运行报错--dependency

    ERROR Failed to compile with 1 errors 11:17:27 This dependency was not found: 解决方法:把报错所缺少的依赖都装上 如 xx ...