9

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

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

4

3 回答 3

10

快速测试表明：

<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 的元素都需要按百分比调整大小，而不是静态调整。

这样想：

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

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

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

然后

  • body 是窗口大小的 100%。
  • div 为 100px，忽略正文宽度。
  • img 是 div 的 50%。
  • img 为 50px，与窗口大小无关。

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

于 2009-07-09T20:13:01.290 回答
2

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

于 2009-07-09T19:03:32.443 回答
0

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

max-width:95%;
于 2012-10-10T16:42:35.357 回答