在 CSS 流布局中自动调整图像大小以模拟 html 表格布局

我有一个图像，根据屏幕分辨率，它会在 CSS 流布局中下降到看不见的位置，因为我已将其宽度和高度设置为静态值。

CSS 流布局中是否有一种方法可以在有人缩小浏览器窗口时自动调整图像大小。我已经在 html-table 布局中看到了这一点，并且我认为表格使得这成为可能 - 有没有办法在 CSS 流布局中也做到这一点？

快速测试表明：

<img class="test" src="testimage.jpg" />

结合：

img.test { width: 50%; }

按照您可能想要的方式调整大小。图像尽职尽责地将其大小调整为包含它的框宽度的 50%，并垂直调整大小，保持纵横比。

至于根据垂直变化调整大小，它不会按照您想要的方式工作，至少不一致。我试过：

img.test { height: 50%; }

在当前的 Google Chrome (2.0.172) 中，它的大小调整有些不一致；尺寸是正确的，但每次拖动窗口后不会更新。在当前的 Firefox (3.5) 中，高度似乎完全被忽略了。我没有任何最新的 IE、Safari 等可供测试。请随意编辑这些结果。即使这些效果很好，它仍然可能是你想要避免的，并坚持宽度。

EDIT:为此，所有包含 img.test 的元素都需要使用百分比调整大小，而不是静态调整。

可以这样想：

• 主体是窗口尺寸的 100%。
• img 是正文的 50%。
• img 是窗口大小的 50%。

现在假设我添加一个 div。像这样...

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

Then

• 主体是窗口尺寸的 100%。
• div 为 100px，忽略正文宽度。
• img 是 div 的 50%。
• 无论窗口大小如何，img 都是 50px。

如果 div 具有“width: 100%”，则逻辑与以前相同。只要它是某个百分比，并且不是固定的，您就可以使用 img 上的百分比并使其计算出您想要的大小。