//用 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. 论操作系统的IO

    论事件驱动与异步IO - 简书 https://www.jianshu.com/p/814c7e7c4647

  2. (转) RNN models for image generation

    RNN models for image generation MARCH 3, 2017   Today we’re looking at the remaining papers from the ...

  3. 【SQL】【Join基础】了解sql中的join用法,看这一篇就够了

    转自: https://www.cnblogs.com/reaptomorrow-flydream/p/8145610.html SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之 ...

  4. 操作 html 的时候是使用 dom 方法还是字符串拼接?

    比如一个列表里面有很多个 li,要给他们加上数据.但多少个 li 是不确定的,由后台数据确定.这时候,就要动态生成 html 内容了. 那么,这个过程, 是使用 += 方法把标签.数据进行一个个的字符 ...

  5. SAP-批量修改主数据(客户、供应商、物料)

    SAP-批量修改主数据(客户.供应商.物料) TCODE: MASS 对于批量修改主数据如客户,供应商等,可以试用一下Mass , 它所能修改的范围如下: 选定要修改的对象后,点击运行,会要求选择需要 ...

  6. CART决策树

     CART(Classification and Regression tree)分类回归树由L.Breiman,J.Friedman,R.Olshen和C.Stone于1984年提出.ID3中根据属 ...

  7. Spring-Mybatis依赖

    <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --><dependency> <groupId& ...

  8. React Native 组建之IOS和Android通用抽屉

    /** * Sample React Native App * https://github.com/facebook/react-native * @flow *npm:https://www.np ...

  9. js控制的选项卡

    选项卡在各种网站网页上是随处可见的一种形式 今天就简单的讲解下 选项卡得制作方法 首先:思路: 我们做一个四个控制的选项卡  则应该有四个小的DIV 外边包裹着一个大的div 用四个input按钮来控 ...

  10. codeforces 741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths

    题目链接:Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths 第一次写\(dsu\ on\ tree\),来记录一下 \(dsu\ o ...