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实现的页内搜索代码
May 23 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
浅析vue中的nextTick
Dec 28 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异步执行的常用方式详解
2013/06/03 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
深入浅出学习python装饰器
2017/09/29 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
《黄河颂》教学反思
2014/02/07 职场文书
优秀团员个人总结
2015/02/26 职场文书
运动会通讯稿600字
2015/07/20 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python