当前位置：文江博客话题详情

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

发布于 2024-07-26 02:37:41 字数 178 浏览 11 评论 0原文

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

CSS 流布局中是否有一种方法可以在有人缩小浏览器窗口时自动调整图像大小。我已经在 html-table 布局中看到了这一点，并且我认为表格使得这成为可能 - 有没有办法在 CSS 流布局中也做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

失退 2024-08-02 02:37:41

快速测试表明：

<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 都是 50px。

如果 div 具有“width: 100%”，则逻辑与以前相同。只要它是某个百分比，并且不是固定的，您就可以使用 img 上的百分比并使其计算出您想要的大小。

A quick test shows that this:

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

combined with:

img.test { width: 50%; }

Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.

As for resizing based on vertical changes, it doesn't work the way you would like, at least not consistently. I tried:

img.test { height: 50%; }

In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don't have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.

EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.

Think of it this way:

body is 100% of window size.
img is 50% of body.
img is 50% of window size.

Now suppose I add a div. like this...

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

Then

body is 100% of window size.
div is 100px, ignoring body width.
img is 50% of div.
img is 50px, regardless of window size.

If the div has "width: 100%" though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.

回复收藏 0 原文

眉黛浅 2024-08-02 02:37:41

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

回复收藏 0 原文

与往事干杯 2024-08-02 02:37:41

尝试将 max-width 设置为 95% 之类的值。谢谢，当容器宽度小于图像宽度时，图像会缩小。所有父容器都需要调整

max-width:95%;

Try setting max-width to something like 95%. Thank way the image will shrink when the container width is less then the width of the image. All of the parent containers would need to adju