原文: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. [OpenJudge] 2727 仙岛寻药

    2727:仙岛求药 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 少年李逍遥的婶婶病了,王小虎介绍他去一趟仙灵岛,向仙女姐姐要仙丹救婶婶.叛逆但孝顺的李逍遥闯进 ...

  2. Java测试技巧

    快捷键 修改快捷键 window->preference->general->keys: 查找引用:ctrl+shift+g 覆盖测试:alt+shift+E,T 复制一行:ctrl ...

  3. 【linux】【mysql】CentOS7安装mysql5.6.26

    http://www.cnblogs.com/dreamhome/p/4716425.html     linux系统CentOS7到http://mirrors.sohu.com/mysql/下载想 ...

  4. Python从文件中读取数据

    一.读取整个文件内容 在读取文件之前,我们先创建一个文本文件resource.txt作为源文件. resource.txt my name is joker, I am 18 years old, H ...

  5. 剑指Offer(书):树的子结构

    题目:输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 分析:关于二叉树大部分适应于递归结构. public boolean HasSubtree(TreeN ...

  6. 【MySQL】Got fatal error 1236原因和解决方法

    一 前言  MySQL 的主从复制作为一项高可用特性,用于将主库的数据同步到从库,在维护主从复制数据库集群的时候,作为专职的MySQL DBA,笔者相信大多数人都会遇到“Got fatal error ...

  7. MySQL外键设置 级联删除

    . cascade方式在父表上update/delete记录时,同步update/delete掉子表的匹配记录 . set null方式在父表上update/delete记录时,将子表上匹配记录的列设 ...

  8. Mysql 使用命令及 sql 语句示例

    Mysql 是数据库开发使用的主要平台之一.sql 的学习掌握与使用是数据库开发的基础,此处展示详细sql 语句的写法,及各种功能下的 sql 语句. 在此处有 sql 语句使用示例:在这里 此处插入 ...

  9. python-selenium使用send_keys()方法写中文报错的解决方法

    问题描述: 自动化操作页面,输入中文姓名: # coding=utf-8 url = "http://dealer.bitauto.com/50002218/zuidijia/" ...

  10. UITableView性能-圆角图片

    圆角图片因为GPU渲染会影响性能 参考:http://www.cocoachina.com/ios/20150803/12873.html http://blog.sina.com.cn/s/blog ...