<!--
//图片按比例缩放
var flag=false
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image()
image.src=ImgD.src
if(image.width>0 &&image.height>0){
flag=true
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth
ImgD.height=(image.height*iwidth)/image.width
}else{
ImgD.width=image.width
ImgD.height=image.height
}
ImgD.alt=image.width+"×"+image.height
}
else{
if(image.height>iheight){
ImgD.height=iheight
ImgD.width=(image.width*iheight)/image.height
}else{
ImgD.width=image.width
ImgD.height=image.height
}
ImgD.alt=image.width+"×"+image.height
}
}
}
//-->
</script>
调用的时候
<img onload="javascript:DrawImage(this,100,100)" src="" />
这个是把图片固定在宽和高各是100px,在这区间进行缩放。
有办法，只是IE6等比例缩放无效 因为这要使用max-width属性2个问题
自动缩放 可以通过max-width和max-height来实现
垂直居中，给你一个思路，对于2个inline-block元素同时使用vertical-align:middle能够产生意想不到的效果，IE7可以通过zoom来模仿inline-block
自己动手去写一下吧，你就会明白
js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，脚本之家以稳定页面布局，本代码段就是完成了此功能，而且代码非常简洁，效果很好。复制代码
代码如下:
<html><head><title>等比例缩放图片</title><script>function
DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var
image=new
Image()
image.src=ImgD.src
if(image.width>0
&&
image.height>0){
if(image.width/image.height>=
iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth
ImgD.height=(image.height*iwidth)/image.width
}else{
ImgD.width=image.width
ImgD.height=image.height
}
}else{
if(image.height>iheight){
ImgD.height=iheight
ImgD.width=(image.width*iheight)/image.height
}else{
ImgD.width=image.width
ImgD.height=image.height
}
}
}
}
</script></head><body><img
src=http://www.jb51.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="自动缩放后的效果"
width="100"
height="100"
onload="javascript：DrawImage(this,80,80)"
/></body></html>
