CSS Fluid布局和图像

Question

I am trying to create a completely fluid layout in CSS (everything in %), which would work seamlessly across platforms (desktop/mobile/tablets like iPad).

With Fluid Layouts, can an image be made completely fluid? For example:

img { max-width:100%; }

• Does this mean it will adjust/fit to any extent or window size?
• Also can this be applied to background images as well ?
• Does this property have any limitations in terms of browser implementation or anything ?

Answer 1

The snippet you provide says that the maximum width for the image is 100% . This could mean no wider than the browser window or device viewport. It could also mean no wider than a relatively postitioned parent node. But, if the window is big enough, the image will render at it's native size.

It can't be applied to background images, because the background image itself is tiled or positioned based on it's original size. The max-width trick is mostly useful for content images, not so much layout or styling images.

It is limited, in that IE6 doesn't support it at all. However, that market is rather small and shrinking, so maybe you can ignore that issue.

Answer 2

Your code means the size of the image relative to it's parent's width. So lets say the div that the image is in is 500px wide, then the image may be a maximum of 500px wide, or smaller, not larger. for more info on max-width: W3.org max-width

For backgrounds this works a little different, you can use background-size: xy; for this. It's CSS3 and is not supported by older browsers. for more info on background-size: W3.org background-size