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表格布局中完成,我假设表格使它成为可能 - 有没有办法在CSS流程布局中也这样做?
3 个解决方案
#1
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.
在目前的谷歌浏览器(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.
身体是窗口大小的100%。
img是身体的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.
身体是窗口大小的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上的百分比,并使它达到你想要的大小。
#2
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是垃圾,但由于没有人回答,如何在图像中设置%宽度或高度或两者,以便它是其父级的百分比。不知道?
#3
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%;
#1
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.
在目前的谷歌浏览器(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.
身体是窗口大小的100%。
img是身体的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.
身体是窗口大小的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上的百分比,并使它达到你想要的大小。
#2
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是垃圾,但由于没有人回答,如何在图像中设置%宽度或高度或两者,以便它是其父级的百分比。不知道?
#3
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%;