原文: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. Ruby设计模式-观察者模式学习笔记

    observer.rb #!/bin/env ruby # encoding: utf-8 require 'observer' class CriminalMovement include Obse ...

  2. C++系统学习之四:数组

    与vector的异同 相同:都是存放类型相同对象的容器 不同:数组的大小确定不变,不能随意向数组中增加元素 1.定义和初始化内置数组 数组中元素的个数也属于数组类型的一部分,编译的时候维度应该是已知的 ...

  3. Linux 权限设置和 SUID, SGID 以及粘滞位sticky bit

    suid是指在执行suid程序的过程中,去访问其他文件时拥有suid程序属主的权限,而不是指对suid程序本身拥有suid程序属主的权限! 一. Linux 文件权限的表示方法 文件权限用 12 个二 ...

  4. LeetCode(125) Valid Palindrome

    题目 Given a string, determine if it is a palindrome, considering only alphanumeric characters and ign ...

  5. 高性能MySQL(第三版)

    一.MySQL架构与历史 1.2.2 锁粒度 表锁:写锁的优先级高于读锁:写锁的请求可以插入到读锁的前面,但读锁的请求却不能插入到写锁的前面: 行级锁:行级锁只在存储引擎层实现,在服务器层没有实现: ...

  6. css3盒子模型及其定位

    盒子模型常见相关属性和属性取值 /*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...

  7. [uiautomator篇] 设置@test的执行顺序

    http://jackyrong.iteye.com/blog/2025609 Brief Junit 4.11里增加了指定测试方法执行顺序的特性 测试类的执行顺序可通过对测试类添加注解 “@FixM ...

  8. php(ajax)异步刷新(转)

    第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的.我之前做页面时间自动刷新的功能就是用的ajax.完整代码是:1.getTime.php: 复制 ...

  9. iOS控件-3级城市列表-plist版

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  10. HDU 1693 Eat the Trees ——插头DP

    [题目分析] 吃树. 直接插头DP,算是一道真正的入门题目. 0/1表示有没有插头 [代码] #include <cstdio> #include <cstring> #inc ...