How to make images resizable in flexible layout ?

Question

If we make fluid layout we can use em or % for font and div width and height to make fluid but how to make images resizable?

I want to make one layout for all sizes and devices

Answer 1

I reckon you will have to make use of the canvas element from HTML5. Or you could have some JavaScript that sets the size of the image tag but you would have to do some math to figure out the correct proportions.

Answer 2

There's no simple solution for this. You can use flexible units for the images just like you can your other page elements. But this will result in inefficiencies and aesthetic issues including excess file size for a tiny image (if you're sizing it down), pixellation of sized-up images, etc. So what you likely want is to start with a large image and scale down to the appropriate size versions, and use Javascript to write out a tag referring to the correct size image depending on context.

Answer 3

Joel Spolsky managed to find a very easy solution (a small proprietary CSS definition for IE). He found the solution here.

Answer 4

Well you can size images relative to the viewport width (eg. img.thing { width: 50%; }, but you don't generally want to. Scaled images will at best (when the browser does bicubic resizing) look a bit blurry, and at worst totally blocky/jaggy (nearest neighbour resizing). You can include some CSS (SVG's image-rendering will be supported for HTML in Firefox 3.6; -ms-interpolation-mode in IE) to try to coax the browsers to use the better scaling mode, but it's far from reliable and still the best rendering isn't that great.

In addition, CSS background-image​s cannot be resized at all (yet; it is proposed for CSS3 but you'll have a long wait).

Liquid layout generally aims to adjust the distances between fixed-size images to respond to changes in viewport width, rather than scale the whole page including images. The user can, at least in modern browsers, zoom the whole page including images themselves, taking the image quality hit if they need to.