jquery实现图片按比例缩放示例


Posted in Javascript onJuly 01, 2014
<html> 
    <title></title> 
    <head></head> 
    <style> 
      .thumbnail{overflow:hidden;width:400px;height:240px;} 
    </style> 
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 
    <script language="javascript"> 
      $(function(){ 
        /* 图片不完全按比例自动缩小 by zwwooooo */ 
          $('#content div.thumbnail img').each(function(){ 
            var x = 400; //填入目标图片宽度 
            var y = 240; //填入目标图片高度 
            var w=$(this).width(), h=$(this).height();//获取图片宽度、高度 
            if (w > x) { //图片宽度大于目标宽度时 
              var w_original=w, h_original=h; 
              h = h * (x / w); //根据目标宽度按比例算出高度 
              w = x; //宽度等于预定宽度 
              if (h < y) { //如果按比例缩小后的高度小于预定高度时 
                w = w_original * (y / h_original); //按目标高度重新计算宽度 
                h = y; //高度等于预定高度 
              } 
            } 
            $(this).attr({width:w,height:h}); 
          }); 
      }); 
    </script> 
    <body> 
    <div id="content"> 
      <div id="thumbnail" class="thumbnail" > 
        <img id="web" src="./midle.png"/> 
      </div> 
     </div> 
    </body> 
  </html>
Javascript 相关文章推荐
jQuery 方法大全方便学习参考
Feb 25 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
js中作用域的实例解析
Mar 16 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 #Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 #Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 #Javascript
Visual Studio中js调试的方法图解
Jun 30 #Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 #Javascript
js从Cookies里面取值的简单实现
Jun 30 #Javascript
jQuery学习总结之jQuery事件
Jun 30 #Javascript
You might like
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP正则验证Email的方法
2015/06/15 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
基本DOM节点操作
2017/01/17 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python读取图片属性信息的实现方法
2016/09/11 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
python hook监听事件详解
2018/10/25 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
外贸公司实习自我鉴定
2013/09/24 职场文书
高中毕业生自我鉴定范文
2013/09/26 职场文书
争先创优公开承诺书
2014/08/30 职场文书
个人授权委托书样本
2014/09/13 职场文书
2014年女职工工作总结
2014/11/27 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
深入理解go slice结构
2021/09/15 Golang
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers