JavaScript动态调整图片尺寸
来源:ImBolo.com 发布时间:2009-11-23 12:20:00
在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。
我前段时间写的一篇文章就遇到过这种事情,后来用CSS的overflow和max-width属性暂时解决了页面变形的问题。这种方法好处是简单,但坏处是会破坏某些细节的效果。
如overflow:hidden,意思是当内部元素宽度大于父框架时隐藏超出宽度的部分。这样做可能会是一些内容突然截断,被隐藏了,很对不起观众。
通过max-width属性限制文章插图最大宽度的话,需要考虑各浏览器的兼容性。IE6是不支持这个属性的,在我印象中,一些浏览器虽然支持这个属性,但图片不是等比缩放的(好像是Safari和Opera,记不清了),这样做的话对这些浏览器的用户很不公平。
因此,我最终选择的是通过JavaScript动态改变图片尺寸。这种方法对各种浏览器兼容性良好(现在应该很少人会禁用JavaScript吧?),如果换主题的话,也可以灵活地改变文章插图的最大尺寸。
方案有两个,由于我使用的主题是加载了jQuery库的,因此可以用以下代码实现:
以下为引用的内容: $(document).ready(function() { |
如果不想加载jQuery库,可以用以下代码:
以下为引用的内容: function ResizeImage(image, 插图最大宽度, 插图最大高度) |
采用纯JavaScript的话,麻烦点,需要手动为图片加上class=”Thumbnail”,但最终效果是一样的。
猜你喜欢
- 第一步:创建转向控制页面创建网站默认的首页文件(通常为"index.asp"或"default.asp&quo
- 从某种意义上来说,页面设计(web设计)也就是用户界面设计。有许多技巧可以帮助我们制作出漂亮、实用的界面,这里收集的5个小技巧就会对你有所帮
- 近期,MSN、江民等知名网站相继受到了黑客的威胁和攻击,一时间网络上风声鹤唳。本报编辑部接到本文作者(炽天使)的电话,他详细讲述了发现国内最
- 很多时候,希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时,会把连续的空格解析成一个,所以我们会使用
- 昨天在写“同IP站点查询”工具的时候,需要先用ASP获取查询域名的IP,本来是用WSHSHELL组件,代码如下:<%@LANGUAGE
- 重要提示:本文并非一篇简单地介绍内联格式模型(inline formatting model)的文章。相反,它是对内联格式(inline f
- 如何验证信用卡是否可用,合法? 核实信用卡的真伪是一件麻烦的事儿,看看下面的代码,也许会给你帮上忙:<Script 
- 做前端也有几年时间了,不敢说能把他看地多透,但是多多少少还是有些自己的东西。下面以 Tudou.com 的首页为例,总结总结。就制作而言,我
- 一. 10句话1.不要依赖register_global=ON的环境,从你刚懂得配置php运行环境甚至尚不明白register_global
- 一条语句搞定数据库分页select top 10 b.* from (select&nbs
- 我们有时候看到一些文章因为一行的字符超长而把一些表格或DIV撑开或字符写到溢出了.如何防止表格防止撑开,表格不被内容撑开,单行字符超长div
- 1.--区分大小写select * from a where a=’AbCdE’ collate C
- 代码如下:<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001&quo
- 尽管可能是个比较老的话题了,但是我还是从来没有整理过。今天在《精通HTML》一书中看到,这里整理一下。在XHTML中,<html>
- 前边看到有人发了个层打开效果,总感觉不是很理想 个人认为:-),如果那个层放到固定的容器里面估计就会出现问题的。今天自己来写个,可以支持 在
- 可以自动轮换的页签 tabs with auto play fucntion<html><head><meta
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 18 - Classes part IClass(
- MySQL是关系型数据库中的明星,MongoDB是文档型数据库中的翘楚。下面通过一个设计实例对比一下二者:假设我们正在维护一个手机产品库,里
- 项目有时要用一些Ajax的效果,因为比较简单,也就没有去用什么Ajax.net之类的东西,手写代码也就实现了。 第二天,有人反馈错
- 我们可用正规表达式来寻找并替换URL和邮件地址为活动的超级链接。用到的主要函数就是InsertHyperlinks(inText),语法为: