在CSS流程布局中调整大小的自动图像，以模拟HTML桌布局

Question

我有一个图像，取决于屏幕分辨率，在CSS流程布局中放下视线，因为我将其宽度和高度设置为静态值。

在CSS流程布局中，是否有一种方法可以在某人使浏览器窗口较小时自动调整图像大小。我已经在HTML桌布局中看到了这一点，我认为表使它成为可能 - 是否有办法在CSS流程布局中进行此操作？

Answer 1

快速测试表明：

<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等进行测试。随意编辑这些结果。即使它们做得很好，它仍然可能要避免，并坚持宽度。

编辑：为此，所有包含IMG的元素都需要以百分比（而不是静态）进行尺寸。

这样想：

• 身体是窗户尺寸的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%;