Fluid Image for Responsive Site Design

This will be the first of a group of episodes looking at various solutions to these issues that may include:

  • Fluid Images
  • Picturefill
  • Adaptive Images

In this installment we are going to check out the first of these and the most basic responsive image solution of most: Fluid Images – which aims to cope with the scaling issue.

A word of warning: We are assuming a diploma of technical knowledge in this episode as we’ll cover specific information on this solution! Despite this, we will attempt to clarify the gist of this in a non-technical way, so even though you are not initiated in the dark arts of coding but remain curious – do read on.

Fluid images

One of the first issues we highlighted in my earlier ‘issues’ article was about the fact that before images had only fixed widths and heights and nothing more – which in a responsive website prevents the image from adapting it’s size while the remaining portion of the site changes according to the size of the viewing device. Thankfully rectifying this issue is relatively straightforward by causing our images ‘fluid’. This calls for the following change:

Adding the following CSS:

img {

   max-width: 100%;

   height: auto;

}

The net result of this will be to ensure the image will be absolve to scale down or up in regards to the container its in, with the caveat of not scaling any bigger than its actual size (i.e. max-width: 100%) which means that the caliber of the image will not degrade because they are expanded too much.

If you need to support IE 6 & 7 then in addition you will need to include the following CSS just for these browsers:

img {

   *width: 100%;

}

As these browsers do not understand max-width! You may target these browsers with the addition of the rule above which includes the ie * browser hack, or even as prefer by including an ie specific css file with a conditional include:

<!–[if lt IE 8]>

<link rel=”stylesheet” type=”text/css” href=”ie7.css” />

<![endif]–>

Which will include these styles for all ie browsers below ie7? So looking as of this solution – how does it measure up to the issues we face?

Pros:

  • Solves the ‘Scaling’ issue
  • Easy to implement & no ongoing work required
  • Compatible with many other responsive image approaches as a ‘basic responsive layer’

Conclusion

In this installment we have looked at the fluid images solution which addresses the scaling issue in responsive images. While this solution will not solve all responsive image issues in any way, it is very compatible with other solutions that do try to address those issues and thus is a superb easy first step for a site whose images are definitely not yet reactive at all.

In our next installment we will be looking at a solution with an ambitious scope, that has been hailed in many quarters of the net design community as nearly the ‘second coming of christ’ for responsive images! – Picturefill. Will this solution live up to all the hype ? Or crash to earth just like a damp squib under objective scrutiny?