16

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

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

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

4

4 回答 4

26

更新（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 clip 属性目前不支持百分比： http ://www.w3.org/TR/CSS2/visufx.html#propdef-clip ，最新http://www.w3.org/TR/2011/REC- CSS2-20110607/visufx.html#clipping

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

var heightOfImageToDisplay = image.height / 2;

于 2011-11-23T12:38:45.603 回答
3

对不起，我没有足够的声誉来写评论。

没有 JS绝对有解决方案。

你需要做的就是

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

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

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

如果您想了解更多信息，请参阅此答案https://stackoverflow.com/a/28312070/5692151

于 2018-01-13T15:31:41.130 回答
0

您可以将 div 作为position: relative;并将overflow: hidden; 图像作为position: absolute;

并控制图像的显示方式，但为 div 设置高度并调整图像的顶部和底部属性

于 2011-11-23T12:39:25.967 回答
0

如果您使用的是固定高度图像和固定高度div，并且您正在手动执行此操作，为什么不将图像作为背景，overflow:hidden并且适当地background-position只显示自上而下的顶部和自下而上的底部？

于 2011-11-23T15:06:17.303 回答