原文: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. perl学习之:字符串函数

    一.打开.关闭文件 open的返回值用来确定打开文件的操作是否成功,当其成功时返回非零值,失败时返回零,因此可以如下判断:    if (open(MYFILE, "myfile" ...

  2. Ubuntu 16.04如何使用无线网卡上网

    我使用的无线网卡卡托型号是华为E8372h,网卡是普通电信卡(既可以打电话也可以上网). 按照“芯片朝上.缺口朝外.用最大卡”的方法将网卡装入卡托后,紧接着便将卡托插入笔记本对应的USB接口中. 在这 ...

  3. nw335 debian sid x86-64 -- 4 realtek 提供的官方驱动

    realtek 提供的官方驱动   1 查看无线网卡的驱动芯片: $ sudo lsusb Bus 001 Device 003: ID 0bda:8176 Realtek Semiconductor ...

  4. Spring核心技术(十一)——基于Java的容器配置(一)

    基本概念: @Bean和@Configuration Spring中新的基于Java的配置的核心就是支持@Configuration注解的类以及@Bean注解的方法. @Bean注解用来表示一个方法会 ...

  5. Visual studio 新建网站出现序号(x)

    参考链接: http://www.zhongdaiqi.com/vs2012-new-website-name-bug/ 现象: 分析: VS新建网站出现(1) 这个问题很神秘,把网站删除掉,再创建, ...

  6. Exchange 正版化 授权

    网友说法: Exchange服务器版其实价格不高,企业版也就是几万左右,贵的是客户端授权,一个客户端授权大概要300多.但是,但是,中国企业买Exchange客户端一般都是可以按比例买的,比如10%- ...

  7. swift写一个简单的列表unable to dequeue a cell with identifier reuseIdentifier - must register a nib or a cla

    报错:unable to dequeue a cell with identifier reuseIdentifier - must register a nib or a class for the ...

  8. Non-maximum suppression(非极大值抑制算法)

    在RCNN系列目标检测中,有一个重要的算法,用于消除一些冗余的bounding box,这就是non-maximum suppression算法. 这里有一篇博客写的挺好的: http://www.c ...

  9. 雅图CAD

    今天培训了雅图CAD. 由辅助线确定下一步的位置,是个好思想.

  10. CodeForces contest/776 A+B+C题解

    ICM Technex 2017 and Codeforces Round #400 (Div. 1 +Div.2,combined) A. A Serial Killer 谜一样的题意:每天从两个人 ...