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

Question

我有一个图像,根据屏幕分辨率,在我的CSS流程布局中下降,因为我已将其宽度和高度设置为静态值.

在CSS流布局中是否有一种方法可以在有人使浏览器窗口变小时自动调整图像大小.我已经看到这在html表格布局中完成,我假设表格使它成为可能 - 有没有办法在CSS流程布局中也这样做？

Answer 1

快速测试表明:

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

结合:

img.test { width: 50%; }

调整您可能想要的方式.图像尽职调整到包含它的盒子宽度的50%,并垂直调整大小,保持纵横比.

至于基于垂直变化的大小调整,它不会按照您希望的方式工作,至少不一致.我试过了:

img.test { height: 50%; }

在目前的谷歌浏览器(2.0.172)中,它有点不一致地调整大小; 大小调整是正确的,但每次窗口拖动后都不会更新.在当前的Firefox(3.5)中,高度似乎完全被忽略.我没有任何远程IE,Safari等远程测试.随意编辑这些结果.即使那些做得很好,它仍然可能是你想要避免的东西,并坚持宽度.

编辑: 为了实现这一点,包含img.test的所有元素都需要按百分比调整,而不是静态调整.

想一想:

• 身体是窗口大小的100%.
• img是身体的50%.
• img是窗口大小的50%.

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

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

然后

• 身体是窗口大小的100%.
• div是100px,忽略体宽.
• img是div的50%.
• 无论窗口大小如何,img都是50px.

如果div具有"width:100%",那么逻辑与之前一样.只要它有一定的百分比,而不是固定的,你就可以玩img上的百分比,并使它达到你想要的大小.