整理各种js按比例缩放图片方法（2）
来源：仰天一笑的blog 发布时间：2007-09-27 20:01:00
标签：缩放,图片,比例
按比例缩放的，分享一个我（星期零）写的
<script language="javascript">
function changeImg(mypic){
var xw=160;
var xl=180;
var width = mypic.width;
var height = mypic.height;
var bili = width/height;
var A=xw/width;
var B=xl/height;
if(!(A>1&&B>1))
{
if(A<B)
{
mypic.width=xw;
mypic.height=xw/bili;
}
if(A>B)
{
mypic.width=xl*bili;
mypic.height=xl;
}
}
}
</script>
<img src="sh180.jpg" onload="changeImg(this)">
不过后来发现，只要在img中只指定一个width或者一个height属性，可以自动实现按比例缩放，如：
<img src="sh180.jpg" width="100" />
，这样的话就可以固定宽为100，然后高按比例自动缩放了。
下面这种方法在IE、FIREFOX、OPERA、NETSCAPE测试都适用（by@蛐蛐）：
function SetSize(obj, width, height)
{
myImage = new Image();
myImage.src = obj.src;
if (myImage.width>0 && myImage.height>0)
{
var rate = 1;
if (myImage.width>width || myImage.height>height)
{
if (width/myImage.width<height/myImage.height)
{
rate = width/myImage.width;
}
else
{
rate = height/myImage.height;
}
}
if (window.navigator.appName == "Microsoft Internet Explorer")
{
obj.style.zoom = rate;
}
else
{
obj.width = myImage.width*rate;
obj.height = myImage.height*rate;
}
}
}
用法：
<img src="img/offer/41936519.jpg" border="0" style="zoom: 0.1" onload="SetSize(this, 80, 60)"/>
0
投稿猜你喜欢
- 应该来说，学会了如何插入记录，如何显示记录，那么现在简单的完整的文章系统、新闻系统和留言系统不成问题。那接着下面的问题就是：随着信息内容的不
- '================================================ '
我们怎样才能了解用户需求呢？大家都知道可用性测试、调查问卷之类与用户进行沟通的途径，这些方法各有各的利弊，如果逐一分析的话，恐怕至少要分成三- 为了显示一个渐变而专门制作一个图片的做法是不灵活的，而且很快会成为一种不好的做法。但是遗憾的是，截至写这篇文章，可能还必须这样做，但是希望不
- 如何修改数据库名（db_name)及实例名(Instance_name or Service_name) Nid是Oracle从9iR2开始
- 在推广Web标准的今天，那些崇尚Web标准的人经常说XHTML比HTML更加严格，当然从某种意义上说是的，比如它要求所有的标签关闭并且所有的
- 现在电子商务网站的设计,正面临着一系列的挑战,其中最主要的挑战是:我们尝试建立一种用户体验,来提高用户在线购物的可能性。为了对抗网上激烈的竞
- MSSQL随机数 MSSQL有一个函数CHAR()是将int(0-255) ASCII代码转换为字符。那我们可以使用下面MS SQL语句，可
- 与部门同事做了个小小的交流，话题杂而浅，在此做一个小纪录。1、什么是设计工业设计、环境设计、建筑设计、平面设计、网页设计、服装设计、信息设计
- 你家中的CD、VCD一定很多吧？是不是常遇到为找一张CD把一抽屉的碟子翻得乱七八糟的情况，你一定没少受埋怨——你不想整理它们一下？如：影片是
- <script> Function.prototype.$bind=function(object) {
- 内容摘要：浏览器不兼容这个难题，一直是网页设计师们头痛的事情。ie7.0的面世，尚且不论他是否较之ie6.0进步， ie7和ie6
- Frontpage中的回车键有三种：enter、shift+enter、ctrl+enter。enter键对应于HTML中的<p>
- 翻译说明：这是Solid State Group网站上的一篇很友好的文章，解决了我在设计中遇到的很多问题，故在此我翻译其文，并对原作者表示非
- 以这两个域名为例：http://www.knowsky.com/http://code.knowsky.com/这两个域名都是绑在同一个空间
- 我们可以先建立一个包含文件名，文件标题的待检索文件的数据库，然后，用ADO方式来访问它，并建立记录集对象。具体代码和说明见下：
- SQL Server 2008的一些新特点及独到之处：设置和安装SQL Server 2008的设置和安装也有所改进。配置数据和引擎位已经分
- 要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误，就
- 在内容为主的网站中，搜索框往往是最常用的设计元素之一。从可用性的角度来看，搜索功能是用户有了明确的内容想看的时候最后使用的功能。如果一个网站
- jquery基本入门 第一天：选择器相关 1.html()与.text() .html()取得第一个匹配元素的html内容。会带有标签，.t
