使用CSS Clip与百分比

Question

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

我尝试过使用CSS属性clip,但它似乎不支持%作为一个单元.

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

Answer 1

更新(5年以上):

现在不推荐使用CSS剪辑属性.请考虑使用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剪辑属性目前不支持百分比:http: //www.w3.org/TR/CSS2/visufx.html#propdef-clip,最新http://www.w3.org/TR/2011/REC- CSS2-20110607/visufx.html#剪裁

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

var heightOfImageToDisplay = image.height / 2;

Answer 2

抱歉，我没有足够的声誉来发表评论。

绝对有一个没有 JS 的解决方案。

您需要做的就是

1. 创建一个 svg clipPath，它允许您定义您想要的任何路径。
2. 为响应式剪辑路径设置clipPathUnits =“objectBoundingBox”，这允许使用百分比路径定义

3. 在您的 CSS 代码中应用clipPath。

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

如果您想了解更多信息，请参阅此答案/sf/answers/1981844931/