使用带有百分比的 CSS Clip

我试图在 2 个单独的 div 中仅显示图像的上半部分和同一图像的下半部分。

我尝试过使用 CSS 属性clip，但似乎不支持 % 作为单位。

只有我吗？您有只显示一半图像的解决方案吗？

更新（5年以上后）：

CSS Clip 属性现已弃用。考虑使用clip-path（允许非JS解决方案），它允许您用百分比指定形状。例子：

/* 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%);

使用百分比创建三角形的进一步示例：

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

原来的：CSS Clip 属性当前不支持百分比：http://www.w3.org/TR/CSS2/visufx.html#propdef-clip http://www.w3.org/TR/CSS2/visufx.html#propdef-clip， 最新的http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping

问题的解决方案可能是使用 Javascript 来确定要显示的区域的大小，然后在设置时使用该值clip财产。像这样简单的事情应该可以解决问题：

var heightOfImageToDisplay = image.height / 2;