下面表格是随页面大小100%变化高度和宽度，其中镶嵌了一幅图片（1600*800px）在一个50%*25%的td中，我想让图片随着表格大小自动缩放，那么如何设置图片的width="??" height="??"值？
<table width="100%" height="100%">
<tr>
....
.... <td width="50%" height="25%"><img scr="test.jpg" width="??" height="??"></td>
....
</tr>
</table>
<table width="100%" height="100%">
<tr>
....
.... <td width="50%" height="25%"><img scr="test.jpg" width="??" height="??"></td>
....
</tr>
</table>
2.在事件响应函数中获取document的clientWidth,clientHeight,图片对象的宽度imgWidth,高度imgHeight（初始宽、高）。
3.根据50%，25%计算出td的宽度tdWidth,高度tdHeight;
4.根据tdWidth/tdHeight与imgWidth/imgHeight的大小关系计算出缩放比例scale,以确保图片等比缩放。
5.根据scale计算出图片缩放后的宽度toWidth,高度toHeight。
6.设置图片对象的宽度、高度分别为toWidth,toHeight。
7.完毕。
假如td的class为aa
.aa img
{
width:expression(this.parentNode.tagName=="TD"?this.parentNode.offsetWidth*0.98:"");
height:expression(this.parentNode.tagName=="TD"?this.parentNode.offsetHeight*0.98:"")}
var resizepic = function(){
var pic = document.getElementById("imgPic");
pic.width=(document.body.clientWidth)*0.5;
pic.height=(document.body.clientHeight)*0.25;
}
window.onload=resizepic;
window.onresize = resizepic;</script>
<table width="100%" height="100%">
<tr>
....
.... <td width="50%" height="25%"><img scr="test.jpg" id="imgPic"></td>
....
</tr>
</table>
<script>
var resizepic = function(){
var pic = document.getElementById("imgPic");
pic.width=(document.body.clientWidth)*0.5;
pic.height=(document.body.clientHeight)*0.25;
}
window.onload=resizepic;
window.onresize = resizepic;</script>test.jpg的实际大小1600*800px<table width="100%" height="100%">
<tr>
<td height="25%">第一栏</td>
<td height="25%">第二栏</td>
</tr>
<tr>
<td width="50%" height="25%"><img scr="test.jpg" id="imgPic"></td>
<td width="50%" height="25%">fdfddffd</td>
<tr>
<td colspan=2 height="50%">dffdfddf</td>
</tr>
</table>
试试 否则职能写不同的脚本 去兼容不同的浏览器了
2.在事件响应函数中获取document的clientWidth,clientHeight,图片对象的宽度imgWidth,高度imgHeight（初始宽、高）。
3.根据50%，25%计算出td的宽度tdWidth,高度tdHeight;
4.根据tdWidth/tdHeight与imgWidth/imgHeight的大小关系计算出缩放比例scale,以确保图片等比缩放。
5.根据scale计算出图片缩放后的宽度toWidth,高度toHeight。
6.设置图片对象的宽度、高度分别为toWidth,toHeight。
7.完毕。+1
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
</style>
</head><body>
<script>
var resizepic = function(){
var pic = document.getElementById("imgPic");
var img = new Image();
img.src = pic.src;
var imgWidth,imgHeight,cw,ch,tdWidth,tdHeight,toWidth,toHeight;
imgWidth = img.width;
imgHeight = img.height;
cw= document.body.clientWidth;
ch = document.body.clientHeight;
tdWidth = cw*0.5;
tdHeight = ch*0.25;
//alert([tdWidth,tdHeight]);
if(imgWidth/imgHeight >= tdWidth/tdHeight)
{
toHeight=tdHeight;
toWidth=(imgWidth*toHeight)/imgHeight;
//alert([toWidth,toHeight]);
}
else
{
toWidth=tdWidth;
toHeight=(imgHeight*toWidth)/imgWidth;
}
pic.width = toWidth;
pic.height = toHeight;
}
window.onload=resizepic;
window.onresize = resizepic;
</script>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="25%" valign="bottom">第一栏</td>
<td height="25%" valign="bottom">第二栏</td>
</tr>
<tr>
<td width="50%" height="25%"><div style="width:100%;height:100%;overflow:hidden;"><img src="dining2.jpg" id="imgPic"></div></td>
<td width="50%" height="25%">fdfddffd</td>
<tr>
<td colspan=2 height="50%" valign="top">dffdfddf</td>
</tr>
</table>
</body>
</html>
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
</style>
</head><body>
<script>
var resizepic = function(){
var pic = document.getElementById("imgPic");
var img = new Image();
img.src = pic.src;
var imgWidth,imgHeight,cw,ch,tdWidth,tdHeight,toWidth,toHeight;
imgWidth = img.width;
imgHeight = img.height;
cw= document.body.clientWidth;
ch = document.body.clientHeight;
tdWidth = cw*0.5;
tdHeight = ch*0.25;
//alert([tdWidth,tdHeight]);
if(imgWidth/imgHeight >= tdWidth/tdHeight)
{
toHeight=tdHeight;
toWidth=(imgWidth*toHeight)/imgHeight;
//alert([toWidth,toHeight]);
}
else
{
toWidth=tdWidth;
toHeight=(imgHeight*toWidth)/imgWidth;
}
var imgContainer = document.getElementById("imgContainer");
with(imgContainer){
style.width = tdWidth+"px";
style.height = tdHeight + "px";
}
pic.width = toWidth;
pic.height = toHeight;
}
window.onload=resizepic;
window.onresize = resizepic;
</script>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="25%" valign="bottom">第一栏</td>
<td height="25%" valign="bottom">第二栏</td>
</tr>
<tr>
<td width="50%" height="25%"><div id="imgContainer" style="overflow:hidden;"><img src="dining2.jpg" id="imgPic" /></div></td>
<td width="50%" height="25%" valign="top">fdfddffd</td>
<tr>
<td colspan=2 height="50%" valign="top">dffdfddf</td>
</tr>
</table>
</body>
</html>
1、这样遇到一个新问题，我的图片是1600*800px，也就是2:1,缩放比例相同才能保持外观一样，但屏幕大小比例并不是2:1，这样就变形了了，或者图像下半部被切割掉了
2、imgContainer的作用是什么？
2.原因已经说过了，因为td的overflow不太好使，所以提供个div容器，主要是利用其overflow样式隐藏超出td范围的部分图片。