如何保持基于百分比的剪切路径的纵横比？答案

【问题标题】：How do I keep the aspect ratio of a percentage based clipping path?如何保持基于百分比的剪切路径的纵横比？
【发布时间】：2013-12-18 21:12:06
【问题描述】：

我有一个带有背景图像的三角形，该三角形使用剪辑蒙版进行了剪辑。它是基于百分比的，因此它在不同的屏幕上看起来不会太小/太大。

但是我希望三角形在屏幕宽度/高度发生变化时保持其比例。

.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;
}

这是我所拥有的 - 关于如何完成这项工作的想法......

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

【问题讨论】：

在我看来，要实现这一点，您不应该在 .upper-poly 类中使用百分比而是 px 作为宽度和高度

标签： css

【解决方案1】：

一个可能的解决方案是这个：

.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;
}

如果窗口纵横比过宽，则三角形将被剪切。

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

【讨论】：