在 CSS 流布局中自动调整图像大小以模拟 html-table 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1105633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatic image resizing in a CSS flow layout to simulate a html-table layout
提问by Charlie Kotter
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.
我有一个图像，根据屏幕分辨率，它在我的 CSS 流布局中消失了，因为我已将其宽度和高度设置为静态值。
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?
在 CSS 流布局中有没有办法让图像在有人缩小浏览器窗口时自动调整大小。我已经在 html-table 布局中看到了这一点，我认为这些表格可以在那里实现 - 有没有办法在 CSS 流布局中做到这一点？
回答by WillfulWizard
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.
以您可能想要的方式调整大小。图像尽职地调整为包含它的框宽度的 50%，并垂直调整大小，保持纵横比。
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.
在当前的 Google Chrome (2.0.172) 中，它的大小调整有些不一致；大小是正确的，但不会在每次拖动窗口后更新。在当前的 Firefox (3.5) 中，高度似乎完全被忽略了。我没有任何远程最近的 IE、Safari 等要测试。随意编辑这些结果。即使那些做得很好，它仍然可能是你想要避免的，并坚持宽度。
EDIT:For this to work, all the elements containing img.test need to be sized with percentages, not statically.
编辑：为此，所有包含 img.test 的元素都需要用百分比来调整大小，而不是静态的。
Think of it this way:
可以这样想：
- body is 100% of window size.
- img is 50% of body.
- img is 50% of window size.
- body 是窗口大小的 100%。
- img 是 body 的 50%。
- img 是窗口大小的 50%。
Now suppose I add a div. like this...
现在假设我添加了一个 div。像这样...
<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.
- body 是窗口大小的 100%。
- div 为 100px，忽略主体宽度。
- img 是 div 的 50%。
- img 为 50px，与窗口大小无关。
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.
如果 div 有“width: 100%”，那么逻辑和以前一样。只要它是一些百分比，而不是固定的，您就可以在 img 上使用百分比并使其计算出您想要的大小。
回答by Dave Archer
bit of a guess since my css is rubbish, but since nobody is answering, what about setting a % width or height or both in the image so that it is a percent of its parent. dunno?
有点猜测，因为我的 css 是垃圾，但由于没有人回答，如何在图像中设置 % 宽度或高度或两者，以便它是其父级的百分比。不知道？
回答by Josh Brule
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
尝试将 max-width 设置为 95% 之类的值。谢天谢地，当容器宽度小于图像宽度时，图像会缩小。所有的父容器都需要调整
max-width:95%;
