I'm trying to display only the top half of an image and the bottom half of the same image in 2 separate divs.
I've tried with the CSS property clip, but it doesn't seem to support % as a unit.
Is it just me? Do you have a solution for displaying only a half of an image?
Answer
Update (after 5+ years):
The CSS clip property is now deprecated. Consider using clip-path instead (allowing for a non-JS solution), which allows you to specify shapes with percentages. Example:
/* Bottom half of image */
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
/* Top half of image */
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
Further example to create a triangle using percentages:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Original: CSS clip property does not currently support percentages: http://www.w3.org/TR/CSS2/visufx.html#propdef-clip , latest http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping
A solution to your problem could be to use Javascript to determine the size of the area you want to show, and then use that value when setting the clip property. Something as simple as this should do the trick:
var heightOfImageToDisplay = image.height / 2;