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实现自定义对话框的代码
Jun 15 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
node.js如何根据URL返回指定的图片详解
Oct 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
基于pear auth实现登录验证
2010/02/26 PHP
php实现webservice实例
2014/11/06 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python 多核并行计算的示例代码
2017/11/07 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
Ejb技术面试题
2015/04/29 面试题
合作协议书格式
2014/08/19 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Django中session进行权限管理的使用
2021/07/09 Python