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?

Liquesce

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;

Dromond

This is what I'm doing for the moment, but a was looking for a solution without JS – Liquesce

Not a problem. Perhaps you should say that in your question so others can clearly see you don't want a JS solution :) – Dromond

I totally accept JS solution if there is really no other solution :) – Liquesce

Clip-path's great! What clip should have been from the start. It even supports internal calc() operations. – Ivonne

Why must all the simple things in life like clip be depredicated, * sigh * – Farthest

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://mcmap.net/q/506692/-responsive-clip-path-with-inline-svg

Choroid

Answer 3

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

Louvre

The problem is that the div which contain the image is already on absolute – Liquesce

What about a negative margin-top value? – Louvre

Already tried a margin-top: 50% but the problem is that it doesn't take the direct parent as reference for the %, so it comes with weird results – Liquesce

Answer 4

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?

Libel