思路:
高度都控制在160像素以内，如果是160像素以内的话，就直接显示；
如果高度大于宽度，高度优先缩小在160以内，宽度根据高度的缩放比缩小；反之亦然
1.在处理网页图片时，特别是一些图片列表的应用里面，很难保证图片统一大小，直接设置图片大小又会导致图片拉伸，造成图片模糊，本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。
Javascript代码:
<script language="JavaScript" type="text/javascript">
// 说明：用 JavaScript 实现网页图片等比例缩放
// 整理：http://www.CodeBit.cn
function DrawImage(ImgD,FitWidth,FitHeight)
{
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0)//如果图片的宽高大于0，说明一张图片
{
if(image.width/image.height>= FitWidth/FitHeight)//图片的宽/高，大于限制的宽/高，说明图片的“宽大于高”，以为限制的宽/高=1
{
if(image.width>FitWidth)//原图的宽大于原图的高，而且 “原图的宽大于限制的宽”
{
ImgD.width=FitWidth; //把限制的宽度赋给图片的宽度
//图片的高度等于(图片的高度*限制的宽度)/图片的宽度
ImgD.height=(image.height*FitWidth)/image.width;
}
else//原图的宽大于原图的高，"原图的宽小于限制的宽"，说明原图宽高都在限制以内//宽高不变
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else//如果宽/高小于1的话，说明高大于宽
{
if(image.height>FitHeight)//原图的高大于原图的宽，原图高度大于限制的高度
{
ImgD.height=FitHeight;//限制的高度赋值给图片的高度
//图片的宽度=(图片宽度*限制的高度)/图片的高度
ImgD.width=(image.width*FitHeight)/image.height;
}
else//原图的高大于原图的宽，但是原图的高小于限制的高,说明宽高都在限制以内//宽高不变
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
//-->
</script>
<img src="../images/index_default.png" alt="自动缩放后的效果" οnlοad="javascript:DrawImage(this,200,200);" /> <br />
2.<!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>
<title>图片自适应</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="dinstone">
<meta name="Keywords" content="图片,缩放,查看大图,居中">
<meta name="Description" content="图片缩放到指定大小，对于缩放过的图片，单击查看大图">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
margin: 0;
padding: 0;
border: 1px solid #333;
}
.ldiv
{
width: 300px;
border: 1px solid #333;
}
</style>
<script language="JavaScript">
<!--
function ScreenArea() {
this.clientWidth = 0; //可见区域宽度
this.clientHeight = 0; //可见区域高度
//可见区域宽度
if (document.documentElement && document.documentElement.clientWidth) {
this.clientWidth = document.documentElement.clientWidth;
} else if (document.body && document.body.clientWidth) {
this.clientWidth = document.body.clientWidth;
} else if (window.innerWidth) {
this.clientWidth = window.innerWidth - 18;
}
if (document.documentElement && document.documentElement.clientHeight) {
this.clientHeight = document.documentElement.clientHeight;
} else if (document.body && document.body.clientHeight) {
this.clientHeight = document.body.clientHeight;
} else if (window.innerHeight) {
this.clientHeight = window.innerHeight - 18;
}
this.bodyWidth = document.body.clientWidth; //网页宽度
this.bodyHeight = document.body.clientHeight; //网页高度
this.scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
this.scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
this.scrollWidth = (document.documentElement.scrollWidth ? document.documentElement.scrollWidth : document.body.scrollWidth);
this.scrollHeight = (document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight);
}
function fit(tw, th, sw, sh) {
var temw = tw;
var temh = th;
var flag = 1;
if (sw <= tw && sh <= th) {
temw = sw;
temh = sh;
flag = 0;
} else if (sw > tw && sh <= th) {
temw = tw;
temh = sh * (tw / sw);
} else if (sw <= tw && sh > th) {
temw = tw * (th / sh);
temh = th;
} else if (sw > tw && sh > th) {
var dw = tw / sw;
var dh = th / sh;
if ((dw - dh) >= 0) {
temw = tw;
temh = sh * dw;
} else {
temw = sw * dh;
temh = th;
}
}
return { 'width': temw, 'height': temh, 'flag': flag };
}
function showImgView(imgSrc, imgWidth, imgHeight) {
var ca = new ScreenArea();
var viewMask = document.createElement("DIV");
viewMask.style.cssText = "position:absolute;filter:alpha(opacity=50);opacity:0.5;visibility:visible;background:#000;";
viewMask.style.zIndex = 1;
viewMask.style.top = 0;
viewMask.style.left = 0;
viewMask.style.width = (ca.bodyWidth) + 'px';
viewMask.style.height = (ca.bodyHeight) + 'px';
document.body.appendChild(viewMask);
var imgDiv = document.createElement("DIV");
imgDiv.style.position = 'absolute';
imgDiv.style.border = '3px solid #333333';
imgDiv.style.zIndex = 999;
//imgView.content=imgDiv;
imgDiv.style.left = Math.max((ca.scrollLeft + ((ca.clientWidth - imgWidth) / 2)), 0) + 'px';
//alert("ch="+ca.clientHeight);
imgDiv.style.top = Math.max((ca.scrollTop + ((ca.clientHeight - imgHeight) / 2)), 0) + 'px';
//alert(ca.clientHeight);
var imgObj = document.createElement("img");
imgObj.title = "单击关闭";
imgObj.onclick = function() {
document.body.removeChild(imgDiv);
document.body.removeChild(viewMask);
//imgDiv.style.display='none';
//viewMask.style.display='none';
}
imgObj.src = imgSrc;
imgDiv.appendChild(imgObj);
//imgView.imgObj=imgObj;
document.body.appendChild(imgDiv);
}
function adapt(imgObj, tw, th, isView) {
var cw = parseInt(imgObj.width);
var ch = parseInt(imgObj.height);
var wh = fit(tw, th, cw, ch);
//alert('w = '+wh.width);
//alert('h = '+wh.height);
/*/以下是原著代码,因原著会出现非比例缩放现象,修改为比例缩放.
imgObj.width = wh.width;
imgObj.height = wh.height;*/
//以下是修改后的代码
//========================
var image = new Image();
image.src = imgObj.src;
if (image.width > 0 && image.height > 0) {
var rate = (tw / image.width < th / image.height) ? tw / image.width : th / image.height;
if (rate <= 1) {
imgObj.width = image.width * rate;
imgObj.height = image.height * rate;
}
else {
imgObj.width = image.width;
imgObj.height = image.height;
}
}
//=================================== //alert('flag = '+wh.flag);
if (wh.flag != 0 && isView) {
imgObj.title = "单击查看大图";
imgObj.style.cursor = 'pointer';
imgObj.onclick = function() {
//alert('click');
showImgView(imgObj.src, cw, ch);
}
}
}
//
--></script>
</head>
<body>
<div class="ldiv">
<p>
图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。</p>
<img src="../images/1.jpg"
οnlοad="adapt(this,300,160,1)" /></div>
<div class="ldiv">
<p>
图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。</p>
<img src="../images/1.jpg"
οnlοad="adapt(this,300,160,0)" /></div>
<div class="ldiv">
<p>
图片超出限制尺寸时，自动缩小到指定尺寸范围内，点击后图片后在本页面显示原尺寸图片。</p>
<img src="../images/t1.jpg"
οnlοad="adapt(this,300,160,5)" /></div>
</body>
</html>
3.javascript 根据图片实际比例进行缩放, 并居中显示, 用到jQuery
<html>
<head>
<title>根据图片实际比例进行缩放</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="study/global.js"></script>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
<style>body{font-size:12px;}</style>
</head>
<body>
<p id="pic" style=" width:550px; height:500px; border:solid 1px #f60; overflow:hidden;">
<img src="../images/20113628023622599.jpg" align="center" height=""/>
</p>
<input type="button" value="生成CMD" id="go" οnclick="PicUtil.fixCenter($('#pic'))" />
<br><br>
<div id="msg"></div>
<script>
var PicUtil={
cacheImg:$('<img />'),
//以容器为基准, 根据图片实际比例进行缩放
fixCenter:function(box){
var img=$("img",$(box));
if(img.size()>0){
var o = this.getProperty(img[0]);
if(o.wf>o.w0 && o.hf>o.h0){
this.fixOnly(box);
}else if(o.wf<o.w0 || o.hf<o.h0){
img.width(o.wf).height(o.hf);
if(o.hp>o.hf) $("<div style='clear:both;width:1px;height:+((o.hp-o.hf)/2)+px'></div>").insertBefore(img);
if(o.wp>o.wf) $(box).css("text-align","center");
}
}
},
fixOnly:function(box){
var img=$("img",$(box));
if(img.size()>0){
$(box).css({"background-image":"url("+img[0].src+")","background-repeat":"no-repeat","background-position":"center"}).empty();
}
},
getProperty:function(img){
if(!img || !img.src) return {};
var tmpImg=this.cacheImg;
tmpImg[0].src=img.src+"";
var parent=$(img).parent();
var rs={w0:tmpImg[0].width,h0:tmpImg[0].height,w:img.width,h:img.height,wp:parent.width(),hp:parent.height()};
if(rs.w0==0 || rs.h0==0) return {};
rs.wf=Math.floor(rs.h0/rs.w0*rs.wp)>rs.hp?(Math.floor(rs.w0/rs.h0*rs.hp)):rs.wp;
rs.hf=Math.floor(rs.h0/rs.w0*rs.wp)>rs.hp?rs.hp:Math.floor(rs.h0/rs.w0*rs.wp);
return rs;
}
}
function msg(x,y){
if(!y) $("#msg").html(x); else $("#msg").html(x+"<br>"+$("#msg").html());
}
</script>
</body>
</html>
542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
