How does SVG image pattern work with preserving aspect ratio?

I have the following svg: <svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="display: block; position: absolute; top: 0;"> <defs> <pattern id="img1" patternUnits="objectBoundingBox" width="100%" height="100%"> <image xlink:href="http://ift.tt/2A83ruF" x="0" y="-20" width="100" height="100"/> </pattern> </defs> <polygon points="0 100, 50,50 100,100" id="abajo" style="stroke-width:0" /> </svg>

It's not working as expected because it enlarge te face of the people on the image as follows:

But it should look like this:

Does having a trinagular polygon affects the image? How can I solve it, I need 4 triangle figures with images inside to be clickables.