Clip
What happens when you suggest an idea to a bunch of idiots? You get idiotic and unhelpful responses of course.
Upon digging a bit in CSS, I found an obscure property called clip.1
To display an image in Golden ratio—without physically cropping it, here’s what you do. Let’s take the standard Flickr image size 500:375, which is good for displaying within blog posts. Lets define a CSS class, say, goldenratio:
.goldenratio {position:absolute; clip:rect(33px 500px 309px 0);}
Because its position is set to absolute (a requirement), it applies all values from top-left corner in the following order → top right bottom left. Lets call this class within the image tag like this:
<img src='test.jpg' alt='Test Image' class='goldenratio' />
The resulting image will be displayed in the golden ratio.
@FlickrIdeas: You know what, forget I asked.
- See also Image Clipping and Alignment with CSS. [←]