//用 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. ThreadPoolExecutor线程池

    为什么使用线程池: 1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处理效率. 2.线程并发数量过多,抢占系统资源从而导致阻塞. 3.对线程进行一些简单的管理. 在java ...

  2. Python logging 模块学习

    logging example Level When it's used Numeric value DEBUG Detailed information, typically of interest ...

  3. hihoCoder week10 后序遍历

    题目链接 https://hihocoder.com/contest/hiho10/problem/1 给出先序  中序 求 后序 #include <bits/stdc++.h> usi ...

  4. 题解——P1108低价购买(DP)

    第一问是最长下降子序列,n很小,n^2可过,注意最长下降子序列的枚举顺序即可 ;i<=n;i++)//不要写错 ;j<i;j++)//不要打成<= ) b[i]=b[j]+; 第二问 ...

  5. 论文笔记:Tracking by Natural Language Specification

    Tracking by Natural Language Specification 2018-04-27 15:16:13  Paper: http://openaccess.thecvf.com/ ...

  6. 在服务器端对sshd做白名单

    1.添加用户 #useradd aaa #passwd aaa -->输入密码:123456 添加3个用户,bbb和ccc与aaa添加一样 2.添加白名单 #vim /etc/ssd/sshd_ ...

  7. 项目Alpha冲刺--2/10

    项目Alpha冲刺--2/10 1.团队信息 团队名称:基于云的胜利冲锋队 成员信息 队员学号 队员姓名 个人博客地址 备注 221500201 孙文慈 https://www.cnblogs.com ...

  8. SourceTree/git解决pre-commit hook failed的问题

    一. git commit -m 'xxx' 出现问题 今天在上传项目的时候在commit阶段遇到一个问题,无论是在Sourcetree上传还是用命令git commit -m 'xxx'都报了一下错 ...

  9. ZJOI-2017 R1游记

    无实力非既得利益的$xrdog$作为一名外卡选手去参加ZJOI2017啦... Day 0: 颓?(细节待填坑..) Day 1: 上午我来到讲课现场发现讲课内容是:搜索专题  QwQ不太清醒的我一下 ...

  10. JS中的document.title可以获取当前网页的标题

    <!DOCTYPE html> <html> <head> <title>jb51.net</title> </head> &l ...