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

Question

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

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

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

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

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

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

但是，如果窗口纵横比太宽，三 Angular 形将被切割。

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