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

Question

由于我已将其宽度和高度设置为静态，因此我根据屏幕分辨率将图像放置在CSS流布局的视线之外值。

在CSS流布局中，有人在缩小浏览器窗口时自动调整图像大小。我已经看到这在一个HTML表布局完成，我认为这些表使它成为可能 - 有没有办法在CSS流布局中做到这一点？

Answer 1

简单的测试表明这一点：

img.test { width: 50%; } 

调整大小，你可能想要的方式：

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

联合。该图像尽职调整大小为包含它的盒子宽度的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的宽度为100％，那么逻辑结果与以前一样。只要它有一定的百分比，而不是固定的，你可以使用img上的百分比，并使其达到你想要的大小。

Answer 2

由于我的CSS是垃圾，因为没人回答，所以在图像中设置一个宽度或高度或者两者都是它的父母百分比。不知道？

Answer 3

尝试将最大宽度设置为95％。感谢方式，当容器宽度小于图像宽度时，图像会缩小。所有的父容器需要佐证

max-width:95%;