Question

我只想在2个单独的小区显示一个形象的前半和同一形象的下半部。

I ve Trial with the CSS property clip, but it doesn t to support % as a unit.

难道这只是我吗? 你们是否有办法只展示一半的形象?

Answer 1

<>Update(5+年后):

社会保障局的不动产现在被折旧。考虑采用单价办法(允许采用非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%);

Original: CSS clip property does not currently support percentages: http://www.w3.org/TR/CSS2/visufx.html#propdef-clip , latest http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping

解决贵问题的办法可以是利用 Java印确定你想要显示的面积,然后在确定clip财产时使用这一价值。简单地说,这应当做到:

var heightOfImageToDisplay = image.height / 2;

Answer 2

我没有足够声誉来撰写评论。

没有任何文件的解决办法。

你们都需要做的是

Create an svg clipPath, which allows you define whatever path you want.
Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentage path definition

在您的编码中应用<代码>clipPath。

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

如欲了解更多情况,请参见。

Answer 3

You could have the div as position: relative; and overflow: hidden; Have the image inside as position: absolute;

并控制图像的展示方式,但将图像的特性设定为hels,并调整/em>和bottom。

Answer 4

如果你使用固定的高度图像和固定的高度代码<>div,并且你正在手工操作,为什么不把图像作为背景,用<代码>overflow:hidden <和适当的background-position。因此,它只是从底线和底线向上向上线的顶端?