原文:http://www.open-open.com/code/view/1420975773093

  <script type="text/javascript">
window.onload = function() {
var w = 500;//设置最大宽度,也可根据img的外部容器 而动态获得,比如:$("#demo").width();
$("img").each(function() {//如果有很多图片,使用each()遍历
var img_w = $(this).width();//图片宽度
var img_h = $(this).height();//图片高度
if (img_w > w) {//如果图片宽度超出指定最大宽度
var height = (w * img_h) / img_w; //高度等比缩放
$(this).css( {
"width" : w,"height" : height
});//设置缩放后的宽度和高度
}
}); }
$(document).ready(function() {
//就本例而言 不要用 jQuery中的ready 你懂的...
})
</script>

用 jQuery实现图片等比例缩放大小的更多相关文章

  1. C#图片按比例缩放

    C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...

  2. 理解CSS3中的background-size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  3. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

  4. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  5. 让ie6也支持max-width,和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. (转载)让ie6也支持max-width,和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  8. 微信小程序学习点滴《十二》:图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏 ...

  9. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放,达到图片不变形目的,做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

随机推荐

  1. MySql中引擎

    1. InnoDB 引擎 MySQL 5.5 及以后版本中的默认存储引擎,它的优点如下:灾难恢复性好,支持事务,使用行级锁,支持外键关联,支持热备份. InnoDB引擎中的表,其数据的物理组织形式是簇 ...

  2. MySql的基操勿六

    2018/12/6 星期四 19:34:07 authot by dabaine 数据库注释; -- 这就是注释 /*.....*/ 这也是注释 创建库; create databse [if not ...

  3. RN原生的安卓UI组件

    https://facebook.github.io/react-native/docs/native-components-android.html 这里有一大堆的原生组件可以用,一些是平台自带的, ...

  4. 数据结构( Pyhon 语言描述 ) — —第10章:树

    树的概览 树是层级式的集合 树中最顶端的节点叫做根 个或多个后继(子节点). 没有子节点的节点叫做叶子节点 拥有子节点的节点叫做内部节点 ,其子节点位于层级1,依次类推.一个空树的层级为 -1 树的术 ...

  5. JAVA复制

    复制 直接赋值 直接赋值.在 Java 中, A a1 = a2,我们需要理解的是这实际上复制的是引用,也就是说 a1 和 a2 指向的是同一个对象.因此,当 a1 变化的时候, a2 里面的成员变量 ...

  6. BZOJ 4809: 皇后

    题目大意: n皇后问题,有些格子不能放. 题解: 直接暴力,并不用加优化就能过. 代码: #include<cstdio> using namespace std; int cc,n,an ...

  7. 2. vsCode 安装GoCode

    1)安装gocode 打开命令提示符(以管理员身份打开),输入: go get -u -v github.com/nsf/gocode 开始下载: 下载完毕: 下载完成,查看D:\GoWorks目录, ...

  8. Linux下安装SaltStack

    一.配置yum源和epel源 epel源下载地址:http://pan.baidu.com/s/1o7NJ26u 1.配置yum源 (1)上传操作系统镜像文件来配置yum源,挂载点目录为/yum mk ...

  9. Python flask+css+js+ajax 综合复习

    flask 基本语法结构 注:这里练习的时候把装饰器的@给忘记了,导致访问404 下面练习一下在前段向后端传递参数 get请求需要用   request.args.get('变量') 去接收, get ...

  10. Programming Python 3rd Edition 第三版 pdf chm下载

    Programming Python 作为一款经典系列书籍 非常的耐看 建议有志于学习python的童鞋好好看看 网上 Programming Python第四版的 pdf 下载非常容易 也就是最新的 ...