css - 如何同时调整图像和表格的大小？

我想根据屏幕的高度调整表格或 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>

最佳答案

你可以使用 css3:

背景:url("1.jpg"); 背景大小:100%;

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

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

关于css - 如何同时调整图像和表格的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8979437/