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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
vue二级路由设置方法
Feb 09 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 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中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
Symfony控制层深入详解
2016/03/17 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
js单词形式的运算符
2014/05/06 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python发展简史 Python来历
2019/05/14 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python实现可变变量名方法详解
2019/07/01 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
交通安全教育主题班会
2015/08/12 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python