图片自动适应表格中单元格的大小

feiniao0822 2012-09-17 05:01:36

我想要table充满整个页面，不出滚动条。页面大小改变的时候，图片大小也跟着变化。

<html> 

<head>

</head>

<body>

<form id="form1" >

  <table style="width:100%;height:100%;">

<tr>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

</tr>

<tr>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

</tr>

<tr>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

<td>

  <img src="北京1.jpg" width="100%" height="100%" style="z-index:-



100;width:100%;height:100%;">

</td>

</tr>

  </table>

</form>

</body>

</html>

...全文

520 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

javamy001 2013-01-18

打赏
举报

谢谢。虽然根本看不懂！！

我自是年少-韶华倾负 2013-01-18

打赏
举报

如果对你有用请注意及时结贴谢谢

我自是年少-韶华倾负 2013-01-18

打赏
举报


<!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>test2</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
ul{height:33.3333%}
li{text-align:center;height:100%; float:left;width:33.3333%;}
img{height:100%;width:100%;}
</style>
</head>

<body>
	<ul>
		<li><img src="images/3.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
	</ul>
	<ul>
		<li><img src="images/3.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
	</ul>
	<ul>
		<li><img src="images/3.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
		<li><img src="images/3.jpg" /></li>
	</ul>
</body>
</html>

你看看是不是你要的效果，注意 width 和 height 的比例我是根据 3行 3列来展示的。