编程 Javascript

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>

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

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 构造函数面相对象学习必备知识

Jun 09 Javascript

用JS提交参数创建form表单在FireFox中遇到的问题

Jan 16 Javascript

JS调试必备的5个debug技巧

Mar 07 Javascript

IE中图片的onload事件无效问题和解决方法

Jun 06 Javascript

JavaScript阻止浏览器返回按钮的方法

Mar 18 Javascript

js实现点击获取验证码倒计时效果

Jan 28 Javascript

bootstrap实现图片自动轮播

Dec 21 Javascript

从零开始搭建一个react项目开发

Feb 09 Javascript

vue-router 源码实现前端路由的两种方式

Jul 02 Javascript

node微信开发之获取access_token+自定义菜单

Mar 17 Javascript

javascript使用正则表达式实现注册登入校验

Sep 23 Javascript

JS前端使用Canvas快速实现手势解锁特效

Sep 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