javascript 动态调整图片尺寸实现代码


Posted in Javascript onDecember 28, 2009

我前段时间写的一篇文章就遇到过这种事情,后来用CSS的overflow和max-width属性暂时解决了页面变形的问题。这种方法好处是简单,但坏处是会破坏某些细节的效果。

如overflow:hidden,意思是当内部元素宽度大于父框架时隐藏超出宽度的部分。这样做可能会是一些内容突然截断,被隐藏了,很对不起观众。

通过max-width属性限制文章插图最大宽度的话,需要考虑各浏览器的兼容性。IE6是不支持这个属性的,在我印象中,一些浏览器虽然支持这个属性,但图片不是等比缩放的(好像是Safari和Opera,记不清了),这样做的话对这些浏览器的用户很不公平。

因此,我最终选择的是通过JavaScript动态改变图片尺寸。这种方法对各种浏览器兼容性良好(现在应该很少人会禁用JavaScript吧?),如果换主题的话,也可以灵活地改变文章插图的最大尺寸。

方案有两个,由于我使用的主题是加载了jQuery库的,因此可以用以下代码实现:

$(document).ready(function() { 
$('.post img').each(function() { 
var maxWidth = 100; // 图片最大宽度 
var maxHeight = 100; // 图片最大高度 
var ratio = 0; // 缩放比例 
var width = $(this).width(); // 图片实际宽度 
var height = $(this).height(); // 图片实际高度 
// 检查图片是否超宽 
if(width > maxWidth){ 
ratio = maxWidth / width; // 计算缩放比例 
$(this).css("width", maxWidth); // 设定实际显示宽度 
height = height * ratio; // 计算等比例缩放后的高度 
$(this).css("height", height * ratio); // 设定等比例缩放后的高度 
} 
// 检查图片是否超高 
if(height > maxHeight){ 
ratio = maxHeight / height; // 计算缩放比例 
$(this).css("height", maxHeight); // 设定实际显示高度 
width = width * ratio; // 计算等比例缩放后的高度 
$(this).css("width", width * ratio); // 设定等比例缩放后的高度 
} 
}); 
});

如果不想加载jQuery库,可以用以下代码:
function ResizeImage(image, 插图最大宽度, 插图最大高度) 
{ 
if (image.className == "Thumbnail") 
{ 
w = image.width; 
h = image.height; 
if( w == 0 || h == 0 ) 
{ 
image.width = maxwidth; 
image.height = maxheight; 
} 
else if (w > h) 
{ 
if (w > maxwidth) image.width = maxwidth; 
} 
else 
{ 
if (h > maxheight) image.height = maxheight; 
} 
image.className = "ScaledThumbnail"; 
} 
}

采用纯JavaScript的话,麻烦点,需要手动为图片加上class=”Thumbnail”,但最终效果是一样的。
Javascript 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 #Javascript
jQuery的强大选择器小结
Dec 27 #Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 #Javascript
JavaScript 拾漏补遗
Dec 27 #Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 #Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 #Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 #Javascript
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
使用python生成目录树
2018/03/29 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
python开发入门——列表生成式
2020/09/03 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
匿名检举信范文
2015/03/02 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
table不让td文字溢出操作方法
2022/12/24 HTML / CSS