Question

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

Answer 1

您可以使用css3：

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

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

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

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

1 个答案: