the 'em' scaled version.

Images scaling with font size.

fig.1 – screenshot with text
fig.2 – nature

The images used in this demo are 1280 × 635 pixels in size. Above they are scaled down to exactly half that size in any browser that has font size preferences set at exactly 16px.

Any deviation through preset font size options and/or font-resizing, will affect the image-size directly. This is the intended effect since the image is sized in 'em' – 40 × 19.85 em to be exact. Images have max-width / max-height set to original size.

The upper image is rather complex, and will deteriorate quickly in most browsers when scaled.

The lower image is more “forgiving”, and will survive scaling quite well.

created: 10.sep.2007
by: Georg Sørtun
See relevant article for more on the subject.