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 相关文章推荐
jquery简单实现图片切换效果的方法
May 12 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
JavaScript的function函数详细介绍
Nov 20 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的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python 图片验证码代码分享
2012/07/04 Python
python字典基本操作实例分析
2015/07/11 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
python安装本地whl的实例步骤
2019/10/12 Python
python常用排序算法的实现代码
2019/11/08 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
平民服装店创业计划书
2014/01/17 职场文书
节约用水倡议书
2014/04/16 职场文书
机关作风建设整改方案
2014/10/27 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
商业计划书之服装
2019/09/09 职场文书