Preserving aspect ratio, the pure CSS way...

When dealing with elastic layouts, web designers have to face the harsh reality of CSS styling: there is no way to enforce an aspect ratio on a certain HTML element, nor to somehow link its height to its width. Not without relying on Javascript.

At least there wasn't. Until now. I came up with a solution involving giant transparent images. The GIF files are only 2KB large, so it has no impact on the loading times.

The <IMG> tag has always been a bit special: web browsers try to maintain pictures aspect ratio. And since a container will adapt to its content's size, a <IMG> in a <DIV> should provide a way to enforce a fixed ratio between the dimensions of the latter! That was the general idea, and I implemented it in the two following pages:

• Aspect ratio preserving DIVs, without Javascript
• Elastic Youtube Player, without Javascript