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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
js数组操作学习总结
Nov 04 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
js+audio实现音乐播放器
Sep 13 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
PHP7 标准库修改
2021/03/09 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
vuex存储token示例
2019/11/11 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
实习老师离校感言
2014/02/03 职场文书
党员公开承诺书2015
2015/01/21 职场文书
《称赞》教学反思
2016/02/17 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
vue的项目如何打包上线
2022/04/13 Vue.js