问使用带有百分比的CSS剪辑

EN

更新(在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、latest http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping

问题的解决方案可能是使用Javascript确定要显示的区域的大小，然后在设置clip属性时使用该值。像这样简单的东西应该能起到作用：

var heightOfImageToDisplay = image.height / 2;

很抱歉，我没有足够的名气来写评论。

在没有JS的情况下，绝对有一个解决方案。

你所要做的就是

1. 创建一个svg clipPath，它允许你定义你想要的任何路径。
2. 为响应式剪辑路径设置clipPathUnits="objectBoundingBox“，它允许在css代码中使用percentage path definition
3. Apply objectBoundingBox。

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

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

您可以将div设置为position: relative;，overflow: hidden;将图像设置为position: absolute;

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