使用带有百分比的 CSS Clip
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8242222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS Clip with percentage
提问by Axiol
I'm trying to display only the top half of an image and the bottom half of the same image in 2 separate divs.
我试图在 2 个单独的 div 中仅显示图像的上半部分和同一图像的下半部分。
I've tried with the CSS property clip, but it doesn't seem to support % as a unit.
我已经尝试过使用 CSS 属性clip，但它似乎不支持 % 作为一个单位。
Is it just me? Do you have a solution for displaying only a half of an image?
只有我吗？你有只显示一半图像的解决方案吗？
回答by Christopher Bull
Update (after 5+ years):
更新（5 年后）：
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:
CSS 剪辑属性现已弃用。考虑使用 clip-path 代替（允许使用非 JS 解决方案），它允许您使用百分比指定形状。例子：
/* Bottom half of image */
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
/* 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%);
/* Top half of image */
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
Further example to create a triangle using percentages:
使用百分比创建三角形的进一步示例：
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
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
原文：CSS 剪辑属性目前不支持百分比： http://www.w3.org/TR/CSS2/visufx.html#propdef-clip，最新http://www.w3.org/TR/2011/REC- CSS2-20110607/visufx.html#clipping
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 clipproperty. Something as simple as this should do the trick:
您的问题的解决方案可能是使用 Javascript 来确定要显示的区域的大小，然后在设置剪辑属性时使用该值。像这样简单的事情应该可以解决问题：
var heightOfImageToDisplay = image.height / 2;
var heightOfImageToDisplay = image.height / 2;
回答by Lin Shen
Sorry that I don't have enough reputation to write a comment.
抱歉，我没有足够的声誉来发表评论。
There's absolutely a solution without JS.
没有 JS绝对有解决方案。
All you need to do is
你需要做的就是
- Create an svg
clipPath, which allows you define whatever path you want. - Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentagepath definition
Apply the
clipPathin your css code.#your-element { clip-path: url(#clipPathId); }
- 创建一个 svg
clipPath，它允许您定义所需的任何路径。 - 为响应式剪辑路径设置 clipPathUnits="objectBoundingBox"，允许使用百分比路径定义
应用
clipPath在你的CSS代码。#your-element { clip-path: url(#clipPathId); }
If you want more information, please refer this answer https://stackoverflow.com/a/28312070/5692151
如果您想了解更多信息，请参阅此答案https://stackoverflow.com/a/28312070/5692151
回答by peduarte
You could have the div as position: relative;and overflow: hidden;Have the image inside as position: absolute;
你可以有股利作为position: relative;和overflow: hidden;有图像内的position: absolute;
And control how the image is displayed but setting a heightto the div and adjust the topand bottomproperties of the image
并控制图像的显示方式，但为 div设置高度并调整图像的顶部和底部属性
回答by Yisela
If you are using fixed height images and fixed height div, and you are doing this manually, why not put the image as a background, with overflow:hiddenand proper background-positionso it only shows the top one from the top down and bottom one from the bottom up?
如果您使用固定高度图像和固定高度div，并且您是手动执行此操作，为什么不将图像作为背景，使用overflow:hidden适当的，background-position以便它只显示从上到下的顶部和从下到上的底部？
