如何同时调整图像和表格的大小？答案

【问题标题】：How can I resize an image and a table at the same time?如何同时调整图像和表格的大小？
【发布时间】：2012-02-17 06:18:57
【问题描述】：

我想根据屏幕高度调整表格或 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">&nbsp;</td>
  </tr>
  <tr>
    <td><img src="images/1.jpg" class="stretch" /></td>
  </tr>
</table>

</body>

【问题讨论】：

你只使用html吗？

标签： css image html-table resize scale

【解决方案1】：

你可以使用 css3：

background:url("1.jpg"); background-size:100%;

完整的解释可以在这里找到：

http://www.w3schools.com/cssref/css3_pr_background-size.asp

【讨论】：

表格仍然没有“自动展开”，不同的窗口调整大小以在背景上显示整个图像。另外，是CS3，浏览器以前的版本会有问题。
是的。你想使用 JavaScript 还是什么？