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 i

Answer 1

You could have the div as position: relative; and overflow: hidden; Have the image inside as position: absolute;

And control how the image is displayed but setting a height to the div and adjust the top and bottom properties of the image

Answer 2

If you are using fixed height images and fixed height div, and you are doing this manually, why not put the image as a background, with overflow:hidden and proper background-position so it only shows the top one from the top down and bottom one from the bottom up?

Answer 3

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

Answer 4

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;