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中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
layui导出所有数据的例子
Sep 10 Javascript
vue实现前端列表多条件筛选
Oct 26 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
vue实现登录拦截
2020/06/29 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
python异步存储数据详解
2019/03/19 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
python模拟斗地主发牌
2020/04/22 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
网站设计师的岗位职责
2013/11/21 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript