摘要:CSS-JavaScript，圖片限定在範圍內縮放大小
<html>
<head>
<script>
var flag=false;
function MyImage(Img){
var image=new Image();
image.src=Img.src;
width=200;//預先設置的所期望的寬的值
height=200;//預先設置的所期望的高的值
if(image.width>width||image.height>height){
//現有圖片只有寬或高超了預設值就進行js控制
w=image.width/width;
h=image.height/height;
if(w>h){//比值比較大==>寬比高大
Img.width=width; //定下寬度為width的寬度
Img.height=image.height/w; //以下為計算高度
}else{//高比寬大
Img.height=height; //定下寬度為height高度
Img.width=image.width/h; //以下為計算高度
}
}
}
</script>
<style>
.album-pic img {
vertical-align: middle;
max-width:200px; /* FF IE7 */
max-height:200px; /* FF IE7 */
_width:expression(this.width > 100 && this.width > this.height ? 200: auto); /* IE6 */
_height:expression(this.height > 200 ? 200 : auto); /* IE6 */
}
</style>
</head>
<body>
<div class="album-pic">
<img src="demo.jpg" onload="javascript:MyImage(this);" border="0"/>
</div>
</body>
</html>