The trend of Flexible images in web design:

February 3, 2012 in CSS

 

Increasingly the websites are being viewed on mobile devices and tablets with varied screen sizes and resolutions. This provides a challenge to design sites that are scalable, have fluid layout capabilities and look good in all popular devises. A Varity of solutions are being explored to combat the challenges.

Browsers compatibility and other issues also impede and hinder the layouts as some browsers do not support features of css3 or html 5. One simple trick that can be used to resize images to different screen sizes and layout is using the CSS’s max-width image size percent property.

1 img { max-width: 100%; }

If no other image width styles override this rule, every image will load in its original size. The css sets the maximum width of the image to 100% of the screen or browser width, and when that 100% changes so does the image size. The idea is to deliver images at the maximum size they will be used at and the height and width of the image is not declared. This lets the browser resize the images as needed while using CSS to guide their relative size. It’s a great and simple technique to resize images beautifully.

Some non cons to this are

1) Max-width is not supported in IE, but a way around to that is using 1 img {width: 100%} in an IE-specific style sheet.

2) One more con to this is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be.  This can be fixed using a java script code found at this link.