Fluid Images
Had an interesting day sorting out all my images into scaleable, fluid containers. Turns out it is as simple as:
img, div, object {
max-width: 100%
}
This is stated in Ben Frain’s excellent book “Responsive Web Design with HTML5 and CSS3” pg 77. Available on Amazon – as always!
* Update14/04
Whilst this does indeed do the job. It is a tad “quick and dirty”. Ideally, different sized images should be served according to what device is being used. This technique does work but it means using one large image for all devices – which isn’t ideal. Going forward I’d like to look at better responsive re-scaling techniques, although as stated in Peter Gasston’s great “The Modern Web” book, there really isn’t any native solution to this problem yet even though some proposals have been put forward (pg 62).
In his book “Implementing Responsive Design”, Tim Kadlec suggests 2 new approaches (pg 106) :
1. Sencha.io Src – an image resizing service created by James Pearce
2. Adaptive Images – a cookie based resizing solution by Matt Wilcox
Both of these techniques have their downsides however – they will need further investigation. At present the Shackadelic site is using a one size image (which is scaled) approach. I’m not keen on this but until I’m convinced of a better solution this is how it will stay.