如何同时调整图像和表格的大小？
我想根据屏幕的高度调整表格或 div 内图像的大小。
虽然我使用所有不同类型的代码来调整图像大小，但它总是会在表格或 div 之外获得某种绝对定位步进，而不是一起拖动它们。
- 必须尊重图像的比例。
- 整个图像在每个屏幕分辨率上都必须始终可见 （无滚动）。
- 表格的顶部单元格必须始终具有与调整大小的图像相同的宽度，但高度固定。
- 我的图像（“1.jpg”）最初为 800x600。
我的代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style>
html, body, table { height:100%; width:auto; }
.stretch {
height:100%;
width:auto;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="125px" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td><img src="images/1.jpg" class="stretch" /></td>
</tr>
</table>
</body>
I want to resize an image inside a table or a div according to the height of the screen.
While I use all different kind of codes to resize the image, it always gains some sort of absolute positioning stepping outside the table or the div, instead of dragging them along with.
- The proportion of the image must be respected.
- The entire image must be always visible on every screen resolution
(no scroll). - The top cell of the table must have always the same width of the resized image, but a fixed high.
- My image ("1.jpg") has originally 800x600.
My code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style>
html, body, table { height:100%; width:auto; }
.stretch {
height:100%;
width:auto;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="125px" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td><img src="images/1.jpg" class="stretch" /></td>
</tr>
</table>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用 css3：
background:url("1.jpg");background-size:100%;
完整说明可以在这里找到：
http:// /www.w3schools.com/cssref/css3_pr_background-size.asp
You could use css3:
background:url("1.jpg");background-size:100%;
full explanation can be found here:
http://www.w3schools.com/cssref/css3_pr_background-size.asp