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

【问题标题】：Automatic image resizing in a CSS flow layout to simulate a html-table layout在 CSS 流布局中自动调整图像大小以模拟 html 表格布局
【发布时间】：2010-11-09 11:45:36
【问题描述】：

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

有没有办法在 CSS 流布局中让图像在有人缩小浏览器窗口时自动调整大小。我已经在 html-table 布局中看到了这一点，我认为这些表格可以在那里实现 - 有没有办法在 CSS 流布局中也做到这一点？

【问题讨论】：

标签： html css screen-resolution autoresize

【解决方案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.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 为 50 像素，与窗口大小无关。

如果 div 有“宽度：100%”，那么逻辑和以前一样。只要它是某个百分比，而不是固定的，您就可以在 img 上使用百分比并使其达到您想要的大小。

【讨论】：

这似乎需要将封闭的 DIV 设置为特定的宽度和高度值？
查看我的编辑。放置一个具有设定宽度和高度的 div 会破坏你正在尝试做的事情。
感谢您的澄清。现在有道理了。感谢您跟进。

【解决方案2】：

有点猜测，因为我的 css 是垃圾，但由于没有人回答，所以在图像中设置 % 宽度或高度或两者，使其成为其父级的百分比。不知道？

【讨论】：

【解决方案3】：

尝试将最大宽度设置为 95%。感谢当容器宽度小于图像宽度时图像会缩小。所有的父容器都需要调整

max-width:95%;

【讨论】：