jQuery实现等比例缩放大图片
来源:互联网 发布:云计算的应用实例 编辑:程序博客网 时间:2024/05/02 21:37
在页面布局时,有时会遇到大图片将页面容器撑大,超出规定区域,
这时我们就需要将图片按比例缩放,让大图片自适应页面布局。
查看演示http://itmyhome.com/jquery_image_scaling/
1、页面中有如下图片
<img alt="leaf" src="img/leaf.jpg">
2、使用jQuery将图片缩放
<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>
作者:itmyhome
9 0
- jQuery实现等比例缩放大图片
- jQuery实现等比例缩放大图片
- jQuery实现等比例缩放大图片
- jQuery实现等比例缩放大图片
- jQuery实现等比例缩放大图片让大图片自适应页面布局
- 使用jquery实现图片等比例缩放
- 使用jquery实现图片等比例缩放
- 图片实现等比例缩放
- Android缩放大图片
- jQuery-图片预加载 等比例缩放
- Jquery 上传图片预览,等比例缩放
- jquery图片等比例缩放程序
- 用jQuery实现图片预加载和等比例缩小,大图可以点击关闭
- 用jQuery实现图片预加载和等比例缩小,大图可以点击关闭
- javascript 实现网页图片等比例缩放
- css 实现图片的等比例缩放
- 用css实现图片等比例缩放
- js实现图片等比例缩放
- 浅谈oracle复合数据类型
- 关于listview弹簧效果
- oracle中bulk collect用法
- oracle数组使用实例
- JBOSS启动(前台/后台)
- jQuery实现等比例缩放大图片
- Java 接口与类
- Visual C++剪贴板操作不完全攻略
- oracle随机数(dbms_random包)
- Lex与Yacc学习(一)之环境配置篇
- root用户运行tomcat提示无权限
- ios socket AsyncSocket使用
- JAVA RESTful Web Services - Jersey 入门
- 我的博客今天5岁4天了,我领取了资…