Using CSS Clip with percentage

Question

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 1

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;

Answer 2

Sorry that I don't have enough reputation to write a comment.

There's absolutely a solution without JS.

All you need to do is

1. Create an svg clipPath, which allows you define whatever path you want.
2. Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentage path definition

3. Apply the clipPath in your css code.

   #your-element {
      clip-path: url(#clipPathId);
   }
   

If you want more information, please refer this answer https://stackoverflow.com/a/28312070/5692151