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 相关文章推荐
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
npm 下载指定版本的组件方法
May 17 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
OpenLayers3实现地图显示功能
Sep 25 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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
PHP 防恶意刷新实现代码
2010/05/16 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
js form action动态修改方法
2008/11/04 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
美术毕业生求职信
2014/02/25 职场文书
社区助残日活动总结
2014/08/29 职场文书
义诊活动通知
2015/04/24 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技