javascript等比例缩放图片的实现代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>jQuery实现等比例缩放大图片</title>
<link rel="stylesheet" type="text/css" href="http://lovebeyond19831993.blog.163.com/blog/../css/main.css" />
<script type="text/javascript" src="http://www.ileyang.com/statics/js/jquery.min.js"></script>
<style type = "text/css" >
body { background : #F90; margin:0; padding:0;}
img , div { padding : 0 ; margin : 0 ;}
. demo { width : 1000px ; background : #fff; margin:0 auto; margin-top:30px; height:800px; overflow:hidden;}
#demo1{ width:1000px;}
</style>
<script type = "text/javascript" >
$ ( function (){
var w = $ ( window ). width ();
var img_w = $ ( "#demo1 img" ). width ();
var img_h = $ ( "#demo1 img" ). height ();
if ( img_w > w ){
var height = ( w * img_h ) / img_w ;
$ ( "#demo1 img" ). css ({width : w , height : height });
}
$ ( window ). resize ( function (){
var w = $ ( window ). width ();
var w2 = $ ( "#demo1" ). width ();
var img_w = $ ( "#demo1 img" ). width ();
var img_h = $ ( "#demo1 img" ). height ();
if ( img_w > w ){ //图片宽度大于宽度
var height = ( w * img_h ) / img_w ;
$ ( "#demo1 img" ). css ({width : w , height : height });
$ ( "#demo1 img" ). attr ( "attr" , w );
} else {
$ ( "#demo1 img" ). css ({width : 1000 , height : 600 });
}
if ( w < w2 ){ //屏幕少于容器宽度
var height = ( w * img_h ) / img_w ;
$ ( "#demo1 img" ). css ({width : w , height : height });
}
});
$ ( window ). scroll ( function (){
var w = $ ( window ). width ();
var w2 = $ ( "#demo1" ). width ();
var img_w = $ ( "#demo1 img" ). width ();
var img_h = $ ( "#demo1 img" ). height ();
var scrollLeft = $ ( this ). scrollLeft ();
var scrollTop = $ ( this ). scrollTop ();
/*
if(scrollLeft > 0){
$("#demo1 img").css({width:1000, height:600});
}
var scrollLeft = $(this).scrollLeft();
var scrollTop = $(this).scrollTop();
if( scrollLeft > 0 ){
//$("#demo1 img").css({width:w, height:height});
var height = (w * img_h) / img_w;
$("#demo1 img").css({width:w, height:height});
}
*/
});
});
</script>
</head>
<body>
<div id = "main" >
<div class = "demo" >
<div id = "demo1" >
<img src = "http://www.melace.com/apolyEdu.jpg" width = "1000" height = "600" alt = "" />
</div>
</div>
</div>
</body>
</html>
javascript等比例缩放图片的实现代码相关推荐
- JAVASCRIPT 等比例缩放图片 限定最大宽度和最大高度
在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真. 1.预先定义好图片显示的标 ...
- python调整屏幕缩放比例_python实现批量按比例缩放图片效果
本文实例为大家分享了python实现批量按比例缩放图片的具体代码,供大家参考,具体内容如下 把脚本文件放在要缩放的文件夹下面. 双击运行脚本,输入要缩放的系数.脚本会在当前目录下创建一个scaledI ...
- 等比例缩放图片并填充图片为正方形（python附代码）
等比例缩放图片并填充图片为正方形 看实现的效果 代码 看实现的效果 之前的 836x662 之后的 300x300 且图片中的塔克斯居中 代码 import os import cv2 import ...
- python 等比例缩放图片 自写
Python等比例缩放图片 使用了 OpenCV 进行图片的读取 输入:利用 cv2.imread 函数读取的 Mat 矩阵 输出:缩放后的 Mat 矩阵(示例代码为缩放到 512x512 大小,也可 ...
- JS实现等比例缩放图片
JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局,但是后台返回的数据图片是1000×1000,那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来,在这种 ...
- python 等比例缩放图片
在对图片缩放时,可能会使得图片产生变形,以下代码按照比例缩放图片,保持长宽比. 例如原图为: 如果resize成(224,224)则图片变为 import cv2def process_image(i ...
- Python Opencv等比例缩放图片
Python Opencv等比例缩放图片 前言 前提条件 相关介绍 实验环境 等比例缩放图片 代码实现 输出结果 前言 本文是个人使用Python Opencv处理图片的笔记,由于水平有限,难免出现错 ...
- [原创] 图片操作的类(ImageLibrary)-按比例缩放图片
[原创] 图片操作的类(ImageLibrary)-按比例缩放图片 http://www.vjsdn.com/bbs/bbsTopicDetails.aspx?pid=241 转载于:https:// ...
- java实现按比例缩放图片技巧
java实现按比例缩放图片技巧 案例需求: 根据指定的文件名称,用户给定的缩放比例来完成缩放图片 思路分析: 1.文件对象File 2.BufferedImage构造器: 图像数据的访问的缓冲器 3. ...
最新文章
- NLTK命名实体识别NER
- python培训好学吗-开平北大青鸟：Python培训怎么选？Python好学吗？
- 本月 上月 php,显示本月，上月，今天，今年以及各时间起点与
- python pytorch 版本,python 如何查看pytorch版本
- SpringBoot项目利用maven自定义打包结构
- 图灵奖大佬 Lecun 发表对比学习新作，比 SimCLR 更好用！
- 错误记录（10）SyntaxError: identifier starts immediately after numeric literal
- App内存优化-实践
- 看漫画学python电子书-看漫画学Python：有趣、有料、好玩、好用（全彩版）
- play framework自定义插件plugin
- 求职简历-机器学习工程师
- 我爱Ruby的三十七个理由
- win10激活工具---KMSAutoNet
- 数据科学太难？这些陷阱请避开，正能量很重要！
- c语言烟花发射原理,烟花发射原理
- AXI接口协议详解-AXI总线、接口、协议
- 在Linux上搭建Socks5 Proxy代理服务器
- 电脑桌面上什么东西都没有了，要怎么设置才能恢复？？
- 如何免费将XPS转换成PDF？
- js字符串截取前几位或者后几位的方法