使用CSS剪辑与百分比 [英] Using CSS Clip with percentage

问题描述

我试图在两个单独的div中只显示图片的上半部分和同一图片的下半部分。

I'm trying to display only the top half of an image and the bottom half of the same image in 2 separate divs.

CSS属性 clip ，但它似乎不支持％作为一个单位。

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

这只是我吗？

推荐答案

更新（5年以上）：

CSS剪辑属性现已弃用。请考虑使用剪辑路径（允许非JS解决方案），这允许您使用百分比指定形状。示例：

The CSS clip property is now deprecated. Consider using clip-path instead (allowing for a non-JS solution), which allows you to specify shapes with percentages. Example:

/ *下半部分* /
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％ code>

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

原始：
CSS剪辑属性目前不支持百分比：
http://www.w3.org/TR/CSS2/visufx.html#propdef-剪辑，最新 http：// www .w3.org / TR / 2011 / REC-CSS2-20110607 / visufx.html＃clipping

您的问题的解决方案可能是使用Javascript确定要显示的区域的大小，然后在设置剪辑属性时使用该值。这么简单的东西应该做的诀窍：

A solution to your problem could be to use Javascript to determine the size of the area you want to show, and then use that value when setting the clip property. Something as simple as this should do the trick:

var heightOfImageToDisplay = image.height / 2;

这篇关于使用CSS剪辑与百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！