在CSS流布局中自动调整图像大小以模拟html表布局 [英] Automatic image resizing in a CSS flow layout to simulate a html-table layout

问题描述

我有一个图像，根据屏幕分辨率，在我的CSS流布局中下降到视线之外，因为我已将其宽度和高度设置为静态值。

有一种方法在CSS流布局让图像自动调整大小，而有人正在使浏览器窗口较小。我已经看到这样做在一个html表布局，我认为表使它有可能 - 是否有一种方法，在CSS流布局吗？

解决方案

快速测试显示：

 < img class =testsrc =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。 like this ...

 < div class =imgboxstyle =width：100px;> 
< img class =testsrc =testimage.jpg/> 
< / div> 
  

然后

<

• img是div的50％。
body是窗口大小的100％。

• div是100px。

如果div具有width：100％虽然，然后逻辑的工作方式与以前一样。只要它的一些百分比，而不是固定的，你可以玩的百分比在img，并使其工作出你想要的大小。

I have an image that, depending on the screen resolution, drops down out of sight in my CSS flow layout because I have set its width and height to static values.

Is there a way in a CSS flow layout to have the image automatically resize while someone is making the browser window smaller. I have seen this done in a html-table layout and I assume the tables make it possible there - is there a way to also do this in a CSS flow layout?

解决方案

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.

这篇关于在CSS流布局中自动调整图像大小以模拟html表布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！