blocks|key|967577|text|更新(在5%2B年份之后)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|967578|CSS剪辑属性现在已弃用。请考虑使用clip-path+(允许使用非JS解决方案)，它允许您使用百分比指定形状。示例：|967579|/*+Bottom+half+of+image+*/+clip-path:+polygon(0+50%25,+100%25+50%25,+100%25+100%25,+0%25+100%25);|CODE|967580|/*+Top+half+of+image+*/+clip-path:+polygon(0+0,+100%25+0,+100%25+50%25,+0+50%25);|967581|使用百分比创建三角形的进一步示例：|967582|clip-path:+polygon(50%25+0%25,+0%25+100%25,+100%25+100%25);|967583|原始：+CSS剪辑属性当前不支持百分比：http://www.w3.org/TR/CSS2/visufx.html#propdef-clip、latest+http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping|967584|问题的解决方案可能是使用Javascript确定要显示的区域的大小，然后在设置clip属性时使用该值。像这样简单的东西应该能起到作用：|967585|var+heightOfImageToDisplay+=+image.height+/+2;|967586|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/visufx.html#propdef-clip|1|http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping^0|0|C|0|0|0|2B|0|0|21|0|0|0|1B|0|0|3|K|1E|0|26|1S|1|0|0|0|1A|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@$9|1B|A|1C|B|J]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1D|8|@$9|1E|A|1F|B|J]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1G|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|J]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@$9|1N|A|1O|1|1P]|$9|1Q|A|1R|1|1S]]|E|$]]|$1|S|3|T|5|6|7|1T|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1U|8|@$9|1V|A|1W|B|J]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]]]

Update (after 5+ years):

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:

<code>/* Bottom half of image */
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);</code>

<code>/* Top half of image */
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);</code>

Further example to create a triangle using percentages:

<code>clip-path: polygon(50% 0%, 0% 100%, 100% 100%);</code>

Original:
CSS clip property does not currently support percentages:
<a href="http://www.w3.org/TR/CSS2/visufx.html#propdef-clip" rel="noreferrer">http://www.w3.org/TR/CSS2/visufx.html#propdef-clip</a> , latest <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping" rel="noreferrer">http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping</a>

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:

<code>var heightOfImageToDisplay = image.height / 2;</code>

blocks|key|3471743|text|您可以将div设置为position:+relative;，overflow:+hidden;将图像设置为position:+absolute;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3471744|并控制图像的显示方式，但将高度设置为div，并调整图像的顶部和底部属性|3471745|entityMap^0|A|J|U|H|1H|J|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

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

And control how the image is displayed but setting a height to the div and adjust the top and bottom properties of the image

blocks|key|3471789|text|如果你使用固定高度图像和固定高度div，并且你是手动操作的，为什么不把图像作为背景，使用overflow:hidden和适当的background-position，这样它只显示从上到下和从下到上的下一个呢？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3471790|entityMap^0|G|3|18|F|1R|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

If you are using fixed height images and fixed height <code>div</code>, and you are doing this manually, why not put the image as a background, with <code>overflow:hidden</code> and proper <code>background-position</code> so it only shows the top one from the top down and bottom one from the bottom up?

blocks|key|5084807|text|很抱歉，我没有足够的名气来写评论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5084808|在没有JS的情况下，绝对有一个解决方案。|offset|length|style|BOLD|5084809|你所要做的就是|5084810|5084811|创建一个svg+clipPath，它允许你定义你想要的任何路径。|ordered-list-item|CODE|5084812|为响应式剪辑路径设置clipPathUnits="objectBoundingBox“，它允许在css代码中使用percentage+path+definition|5084813|Apply+objectBoundingBox。|5084814|5084815|#your-element+{+clip-path:+url(#clipPathId)；}|5084816|如果您想了解更多信息，请参阅此答案https://stackoverflow.com/a/28312070/5692151|5084817|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/28312070/5692151^0|0|J|1|0|0|7|0|0|0|W|8|8|0|0|2A|0|0|O|0|0|0|19|0|0|1P|H|18|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1D|8|@$D|1E|E|1F|F|G]|$D|1G|E|1H|F|N]]|9|@]|A|$]]|$1|O|3|P|5|M|7|1I|8|@$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|M|7|1L|8|@$D|1M|E|1N|F|G]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1P|8|@$D|1Q|E|1R|F|G]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1S|8|@$D|1T|E|1U|F|G]]|9|@$D|1V|E|1W|1|1X]]|A|$]]|$1|X|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]]]

Sorry that I don't have enough reputation to write a comment.

There's absolutely a solution without JS. 

All you need to do is 

<ol>
<li>Create an svg <code>clipPath</code>, which allows you define whatever path you want. </li>
<li>Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentage path definition</li>
<li>Apply the <code>clipPath</code> in your css code.

<pre><code>#your-element {
 clip-path: url(#clipPathId);
}
</code></pre></li>
</ol>

If you want more information, please refer this answer <a href="https://stackoverflow.com/a/28312070/5692151">https://stackoverflow.com/a/28312070/5692151</a>

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

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

Is it just me? Do you have a solution for displaying only a half of an image?

Using CSS Clip with percentage

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图在两个不同的div中只显示图像的上半部分和下半部分。我尝试过使用CSS属性clip，但它似乎不支持将%作为一个单元。就我一个人吗？对于只显示半张图片，你有什么解决方案吗？

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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