JS+css 图片自动缩放自适应大小


Posted in Javascript onAugust 08, 2013

我加了css的限制:

div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
 ◎ width:600px; 在所有浏览器中图片的大小为600px;
 ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。
 ◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。
在放图片的页面里加了
<script language="JavaScript"> 
var imgObj; 
for( i = 0; i < document . getElementsByTagName("img") . length; i++ )
{
 imgObj = document . getElementsByTagName("img")[i];
 //建议只判断高度或者宽度其中一个,那样可以自动按比例缩放
 if ( imgObj . width > 500 ) //判断图片的宽度,如果大于700,则设置为700,值可以自己修改
 {
  imgObj . width = 500
 }
 if ( imgObj . height > 700 ) //判断图片的高度,如果大于700,则设置为700,值可以自己修改
 {
  imgObj . height = 700 
 }
}
</script>

单独的图片控制,用这个:
<script>
var abc=document.getElementById("abc");
var imgs=abc.getElementsByTagName("img");
for (var i=0,g;g=imgs[i];i++)
g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}
</script>

测试在IE和FF下通过。
Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
SeaJS中use函数用法实例分析
Oct 10 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 #Javascript
js获得地址栏?问号后参数的方法
Aug 08 #Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 #Javascript
js动态创建、删除表格示例代码
Aug 07 #Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 #Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 #Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 #Javascript
You might like
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
js 幻灯片的实现
2011/12/06 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
JS高级运动实例分析
2016/12/20 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Python序列循环移位的3种方法推荐
2018/04/09 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
优秀纪检干部材料
2014/08/27 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
学生评语集锦
2015/01/04 职场文书
消费者理赔投诉书
2015/07/02 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis