如何保持基于百分比的剪切路径的长宽比? [英] How do I keep the aspect ratio of a percentage based clipping path?

问题描述

我有一个三角形，带有使用剪贴蒙版剪切的背景图像.它基于百分比，因此在不同的屏幕上看起来不会太小/太小.

I have a triangle with a background image that's clipped using clip-mask. It's percentage based so that it it doesn't look too small/large on different screens.

但是我希望三角形随着屏幕的宽度/高度变化而保持其比例.

However I want the triangle to keep it's ratio as screen width/height is changed.

.upper-poly {
    position: absolute;
    width: 80%;
    height: 80%;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:                url(http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这里是我所拥有的东西-关于如何实现此目的的想法...

Here is a fiddle of what I have - out of ideas on how to make this work...

http://jsfiddle.net/HrNC6/3/

推荐答案

一个可行的解决方案是:

One posible solution is this one:

.upper-poly {
    position: absolute;
    width: 80%;
    height: 0%;
    padding-bottom: 80%;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:             url(http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但是，如果窗口宽高比过宽，则会切掉三角形.

If the window aspect ratio is too wide, however, the triangle will be cut.

之所以可行，是因为以百分比表示的垂直填充是根据父级宽度而不是高度计算的.

This works because vertical padding expressed as percentage is calculated on the parent width and not height.

这篇关于如何保持基于百分比的剪切路径的长宽比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！