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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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
php入门学习知识点三 PHP上传
2011/07/14 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
python装饰器初探(推荐)
2016/07/21 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python多任务及返回值的处理方法
2019/01/22 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python matplotlib库的基本使用
2020/09/23 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
工作失误检讨书范文大全
2014/01/13 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
九年级数学教学反思
2016/02/17 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server