How to Mask Images with Dynamic Sizes to Shapes?
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.
Of course you can, the clip property let you use percentage values and it works since css2. Reference
Some examples: http://www.html5rocks.com/en/tutorials/masking/adobe/