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 相关文章推荐
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
Javascript webpack动态import
Apr 19 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的图形函数中显示汉字
2006/10/09 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python读取csv文件实例解析
2019/12/30 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python callable内置函数原理解析
2020/03/05 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python 如何创建一个线程池
2020/07/28 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
中学生英语演讲稿
2014/04/26 职场文书
森林防火宣传标语
2014/06/27 职场文书
语文教育专业求职信
2014/06/28 职场文书
教师三严三实心得体会
2014/10/11 职场文书
办公室主任个人总结
2015/02/28 职场文书
人民检察院起诉书
2015/05/20 职场文书
比赛主持人开场白
2015/05/29 职场文书
培根随笔读书笔记
2015/07/01 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫