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 技巧
Apr 25 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
js仿淘宝放大镜效果
Dec 28 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php 带逗号千位符数字的处理方法
2012/01/10 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
xml有哪些解析技术?区别是什么
2016/04/26 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
巾帼建功标兵事迹材料
2014/05/11 职场文书
英语教师求职信范文
2015/03/20 职场文书
通知的写法
2015/04/23 职场文书
安全教育主题班会总结
2015/08/14 职场文书
作文之亲情600字
2019/09/23 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android