如何使用动态尺寸将图像掩盖到形状？

I recently came across a problem when trying to find out how to mask dynamic-sized images to shapes like triangles. First I came along with a proportionate type approach where the size of the image would be passed to a variable in the style of the div along with the background image URL and tried to use the width and height proportionality to get the shape I wanted. I shortly realized that isn't possible with CSS. Therefore, I was wondering if there is any way to mask images with dynamic sizes to shapes other than using the mask property in CSS since it is not yet widely supported.I recently came across a problem when trying to