css - 使用带百分比的 CSS Clip

Question

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

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

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

Answer 1

更新(5 年后):

CSS clip 属性现已弃用。考虑改用 clip-path(允许非 JS 解决方案)，它允许您使用百分比指定形状。示例:

/* 图片的下半部分 */ 剪辑路径:多边形(0 50%，100% 50%，100% 100%，0% 100%)；

/* 图像的上半部分 */ 剪辑路径:多边形(0 0, 100% 0, 100% 50%, 0 50%);

使用百分比创建三 Angular 形的更多示例:

剪辑路径:多边形(50% 0%, 0% 100%, 100% 100%);

原文: CSS clip 属性目前不支持百分比: http://www.w3.org/TR/CSS2/visufx.html#propdef-clip , 最新http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping

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

var heightOfImageToDisplay = image.height/2;