动态调整图片尺寸
在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。
我前段时间写的一篇文章就遇到过这种事情,后来用CSS的overflow和max-width属性暂时解决了页面变形的问题。这种方法好处是简单,但坏处是会破坏某些细节的效果。
如overflow:hidden,意思是当内部元素宽度大于父框架时隐藏超出宽度的部分。这样做可能会是一些内容突然截断,被隐藏了,很对不起观众。
通过max-width属性限制文章插图最大宽度的话,需要考虑各浏览器的兼容性。IE6是不支持这个属性的,在我印象中,一些浏览器虽然支持这个属性,但图片不是等比缩放的(好像是Safari和Opera,记不清了),这样做的话对这些浏览器的用户很不公平。
因此,我最终选择的是通过JavaScript动态改变图片尺寸。这种方法对各种浏览器兼容性良好(现在应该很少人会禁用JavaScript吧?),如果换主题的话,也可以灵活地改变文章插图的最大尺寸。
方案有两个,由于我使用的主题是加载了jQuery库的,因此可以用以下代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(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库,可以用以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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”,但最终效果是一样的。






沙发?
哈。用这个用户体验好。图片超出范围很烦的。
图片超高还好,超宽就要把侧边栏挤下去了。。。是可恨
hao dong xi 啊。
我一般是在本地调整大小并压缩
汗,我就是把图片缩小了再插入的,的确太麻烦了,这方法好啊,节省了很多精力了
这个我看不懂,要是有演示说明下就更好了。
@三七八蛋
本地调好尺寸后在上传,这样用户体验才是最好的。这个方法只不过是方便
@万戈
对对,超高倒是没什么的
@浮虾
嗯,对付多图的文章能省很多精力
@LAONB
其实只要挂上代码就OK了,我博客里隐藏了一个演示
@A.shun
这样多辛苦啊
@bolo
是有点辛苦。。不过主要是压缩大小嘛
我图片一般放自己空间,流量影响很大
哇 这个有用!~
还好 我的主题,图片再宽也不挤。以前的主题遇到过这个问题呢
我们没用啊,zblog的用户
@90后的贼
JavaScript是通用的
我都是先把图片修改好在放空间里,呵呵
我都是用小图,一般不会超出范围
很人情化的东东。。
我图片用的少了,文字多了。你这玩意貌似很实用的说哦
很好的,收藏了
来你这里学习一下
爱折腾的家伙,居然又换了个引导页……
@一天一歌
生命不止,折腾不息
我也用不上了,我的BO。
@古墓候梅
都说了,JavaScript是适用于任何网站的
好东西呦,先收藏了~~
好东西,收藏先
先收藏一下
学习了。
好东西,收藏先
试了一下,没整出来