js图片不变形缩略图
程序员文章站
2022-07-08 12:06:56
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>js图片不变形缩略图</title>
<script>
/** 检测图像属性 */
function CheckProperty(obj) {
var ImgObj=new Image();
ImgObj.src = obj.src;
FileObj=ImgObj;
/*
if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测
{
setTimeout("CheckProperty(FileObj)",500);
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
*/
//取得图片的宽度
ImgWidth=ImgObj.width
//取得图片的高度
ImgHeight=ImgObj.height;
cut(obj , ImgWidth , ImgHeight);
setCenter(obj);
}
/** 设置图片层的上一层居中 */
function setCenter(obj){
if(navigator.userAgent.indexOf("MSIE") <= 0){
obj.parentNode.style.display = 'table-cell';
} else {
obj.parentNode.style.display = 'block';
obj.parentNode.style.fontSize = obj.parentNode.height*0.873;
obj.parentNode.style.fontFamily = 'Arial';
}
obj.parentNode.style.verticalAlign = 'middle';
obj.parentNode.style.textAlign = 'center';
}
/** 裁剪图片 */
function cut(obj , width , height){
if(obj.width > obj.height) {
obj.width = width*obj.height/height;
} else {
obj.height = height*obj.width/width;
}
}
</script>
</head>
<body>
<div height="500" style="width:500px;height:500px;border: 3px solid #eee;">
<img src='1.jpg' onload='CheckProperty(this)' width='400' height='300'></div>
</body>
</html>
摘自：http://hi.baidu.com/yujuan260/item/41966612ca1907061994ec38
下一篇： js 缩放图片