Search code examples
htmlcssimage-scalingfluid-layout

CSS Fluid layout and images

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 ?
Solution

  • 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.