使用百分比的CSS剪辑技术

Question

我正在尝试在两个不同的div中分别显示图像的上半部分和下半部分。

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

这只是我一个人的问题吗？您有没有仅显示图像一半的解决方案？

- Axiol

Answer 1

更新（5年后）：

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

/* 图像的下半部分 */ clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);

/* 图像的上半部分 */ 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来确定您想要显示的区域的大小，然后在设置clip属性时使用该值。像这样简单的代码应该就可以解决问题：

var heightOfImageToDisplay = image.height / 2;

- Christopher Bull

---

这是我目前正在做的事情，但我正在寻找一种不需要JS的解决方案。 - Axiol

没问题。也许你应该在问题中说明这一点，这样其他人就可以清楚地看到你不想要一个JS的解决方案 :) - Christopher Bull

如果真的没有其他解决方案，我完全接受 JS 的解决方案 :) - Axiol

Clip-path非常棒！这应该从一开始就有的剪辑。它甚至支持内部的calc()操作。 - Venryx

为什么生活中所有简单的事情，比如剪贴板，都必须被弃用呢，叹气 - user7892745

Answer 2

很抱歉我没有足够的声望来写评论。

完全有一个不需要JS的解决方案。

你需要做的就是

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);
   }
   

如果您需要更多信息，请参考这个答案：https://dev59.com/zl4c5IYBdhLWcg3wHHCY#28312070。这个答案与IT技术有关，可以帮助您更好地理解相关内容。

- Lin Shen

Answer 3

你可以将 div 设置为 position: relative; 和 overflow: hidden;，将图片设置为 position: absolute;

通过为 div 设置一个 height 并调整图片的 top 和 bottom 属性来控制图片的显示方式。

- peduarte

---

问题在于包含图像的 div 已经处于绝对定位状态。 - Axiol

负的_margin-top_值怎么样？ - peduarte

已经尝试过 margin-top: 50%，但问题在于它不以直接父元素作为百分比的参考，因此会产生奇怪的结果。 - Axiol

Answer 4

如果您正在使用固定高度的图像和固定高度的

，并且您是手动完成的，为什么不将图像作为背景，使用overflow:hidden和适当的background-position，这样它只会从顶部向下显示顶部的一个和从底部向上显示底部的一个呢？

- Yisela