用 jQuery实现图片等比例缩放大小
原文: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实现图片等比例缩放大小的更多相关文章
- C#图片按比例缩放
C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- css 如何实现图片等比例缩放
在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...
- CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)
目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...
- 让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- (转载)让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...
- 微信小程序学习点滴《十二》:图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏 ...
- css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放,达到图片不变形目的,做出批量打印图片功能,页面打印“window.print()”
一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...
随机推荐
- LeetCode 字符串相乘
给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = "2", num ...
- 对Java提供的锁机制的一些思考
Java的数据会在CPU.Register.Cache.Heap和Thread stack之间进行复制操作,而前面四个都是在Java Threads之间共享,因此Java的锁机制主要用于解决Racin ...
- 文件操作-mkdir
Linux mkdir命令 主要用来创建目录,也可以直接创建多层目录,本文就为大家介绍下 Linux mkdir命令 . 转载自https://www.linuxdaxue.com/linux-com ...
- docker:安装mysql
文章来源:https://www.cnblogs.com/hello-tl/p/9234429.html 1.添加镜像 docker pull mysql 2.在/data下新建文件夹mysql,进入 ...
- (三)Python3 循环语句——while
while语句的一般形式: while 判断条件: 语句 同样需要注意冒号和缩进.另外,在 Python 中没有 do..while 循环. 以下实例使用了 while 来计算 1 到 100 的总和 ...
- BZOJ 1587: 叶子合并leaves
题目大意:求n个数分成k段的最小代价. 题解:DP,没什么好说的. 代码: #include<cstdio> #include<algorithm> using namespa ...
- http协议工作原理(转)
WWW是以Internet作为传输媒介的一个应用系统,WWW网上最基本的传输单位是Web网页.WWW的工作基于客户机/服务器计算模型,由Web 浏览器(客户机)和Web服务器(服务器)构成,两者之间 ...
- NYOJ 293 Sticks
Sticks 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描述 George took sticks of the same length and cut them r ...
- python---类接口技术
类接口技术 扩展只是一种同超类接口的方式.下面所展示的sPecial'ze.Py文件定义了多个类,示范了一些常用技巧.Super 定义一个method函数以及一个delegate函数.Inherito ...
- Python 频繁读取Mysql相关问题
1.需要频繁select大量数据,时间长.消耗内存大,如何解决mysql性能问题? 如果对返回的结果数量没有要求,可以控制返回的数量: cursor.fetchmany(size=1000) 这样是只 ...