您当前的位置: 首页 » DIV+CSS编程 » 按比例缩小图片方法总结
按比例缩小图片方法总结
论坛链接
其实早些时候就想写一下这个东东，因为想换下主题用用，但发现日志里的图片却因为太大而把POST撑开了，变得很难看。我想遇到这个问题的人一定不少吧。之前一直太忙，没时间去整它，今天抽点时间写一下怎样解决图片撑开的问题，方法很多的、接下来一一给大家道来…
方法一：Max-width|Max-height
这是最简单的方法了，给图片一个最大的宽度和高度:
#Imgbox img {
max-width: 500px;
max-height: 300px;
border:0;
}
但它的效果并不怎么好，因为目前的IE6并不认识这个max-width和max-height。而且有时候图片的宽高相差很大。这样做后图片会变形。
方法二：Max-width/height+Expression
先来了解下什么是CSS expression：
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
了解了之后就简单了，其实就是把JS写到了CSS中，方便应用。我们来看下CSS怎么写:
#Imgbox img {
max-width: 500px;
width:expression(document.body.clientWidth > 500?"500px":"auto" );
display:block;
border:0;
}
这样做虽然实现了等比例缩放，但它还是有它的缺点：会影响浏览器的速度，因为Expression是很占资源的一个东东，所以，一般不是没办法了不建议用CSS的Expression。难道没有好的解决方法了？不，当然有，接着往下看。
方法三：JavaScript实现
应该是这是现在最好的解决方法了，我们看下代码：
function ReImgSize(){
var await = document.getElementById("Imgbox"); //定义要改变的图片的容器ID
var imgall = await.getElementsByTagName("img");//取得容器内所有的IMG标签
for (i=0;i<imgall.length;i++)
{
if (imgall.width>500) //如果图片的宽度大于500
{
var oWidth=imgall.width; //取得图片的实际宽度
var oHeight=imgall.height; //取得图片的实际高度
imgall.width="500"; 重设图片的宽度为500
imgall.height=oHeight*500/oWidth; //重设图片的高度
}
}
}
用法：把上面代码放到Head区，然后在Body标签中加入onload=”ReImgSize”;
最后给大家介绍一个jQuery的插件，用来改变图片的大小，而且还能实现图片的预加载。这个插件很小不到2KB。
它有4个参数：
scaling 是否等比例自动缩放
width 图片最大高
height 图片最大宽
loadpic 加载中的图片路径
实际应用中我们先把JS加载进来然后用一句代码就能实现了
$("img").LoadImage(true,500,200,"loading.gif");
效果不错的。喜欢试下的可以在下面的链接下载DEMO。
方法一：Max-width|Max-height
这是最简单的方法了，给图片一个最大的宽度和高度:
#Imgbox img {
max-width: 500px;
max-height: 300px;
border:0;
}
但它的效果并不怎么好，因为目前的IE6并不认识这个max-width和max-height。而且有时候图片的宽高相差很大。这样做后图片会变形。
方法二：Max-width/height+Expression
先来了解下什么是CSS expression：
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
了解了之后就简单了，其实就是把JS写到了CSS中，方便应用。我们来看下CSS怎么写:
#Imgbox img {
max-width: 500px;
width:expression(document.body.clientWidth > 500?"500px":"auto" );
display:block;
border:0;
}
这样做虽然实现了等比例缩放，但它还是有它的缺点：会影响浏览器的速度，因为Expression是很占资源的一个东东，所以，一般不是没办法了不建议用CSS的Expression。难道没有好的解决方法了？不，当然有，接着往下看。
方法三：JavaScript实现
应该是这是现在最好的解决方法了，我们看下代码：
function ReImgSize(){
var await = document.getElementById("Imgbox"); //定义要改变的图片的容器ID
var imgall = await.getElementsByTagName("img");//取得容器内所有的IMG标签
for (i=0;i<imgall.length;i++)
{
if (imgall.width>500) //如果图片的宽度大于500
{
var oWidth=imgall.width; //取得图片的实际宽度
var oHeight=imgall.height; //取得图片的实际高度
imgall.width="500"; 重设图片的宽度为500
imgall.height=oHeight*500/oWidth; //重设图片的高度
}
}
}
用法：把上面代码放到Head区，然后在Body标签中加入onload=”ReImgSize”;
最后给大家介绍一个jQuery的插件，用来改变图片的大小，而且还能实现图片的预加载。这个插件很小不到2KB。
它有4个参数：
scaling 是否等比例自动缩放
width 图片最大高
height 图片最大宽
loadpic 加载中的图片路径
实际应用中我们先把JS加载进来然后用一句代码就能实现了
$("img").LoadImage(true,500,200,"loading.gif");
效果不错的。喜欢试下的可以在下面的链接下载DEMO。