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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
Javascript中的Split使用方法与技巧
Mar 09 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
jquery操作angularjs对象
Jun 26 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
对node.js中render和send的用法详解
May 14 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
vue3.0生命周期的示例代码
Sep 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中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php 可变函数使用小结
2018/06/12 PHP
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
python爬虫请求头的使用
2020/12/01 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
留守儿童工作方案
2014/06/02 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
教你如何用cmd快速登录服务器
2022/06/10 Servers