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的AJAX实现文件下载的小例子
May 15 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
js实现旋转木马效果
Mar 17 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
解决Vue watch里调用方法的坑
Nov 07 Javascript
ES6 十大特性简介
Dec 09 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中几种常见安全设置详解
2010/04/06 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python抽取指定url页面的title方法
2018/05/11 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
python如何实现DES加密
2020/09/21 Python
python 下划线的不同用法
2020/10/24 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
配件采购员岗位职责
2013/12/03 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
学术会议开幕词
2016/03/03 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电