How to stretch a triangle while maintaining the fill proportions?

Question

SVG

There is such a triangle with the background from the picture :

<svg version="1.1"  width="800px" height="250px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" >
  <pattern id="img_test" width="747" height="274" patternUnits="userSpaceOnUse">
    <image height="100%" xlink:href="https://image.ibb.co/mtOsjo/test_1.png" x="-86" />
  </pattern>
  <polygon fill="url(#img_test)" points="0,100 50,0 100,100"/>
</svg>

1) How to make the background not distorted when resizing the SVG, but be like in the original?
2) How to center the background on X? (now there is x = "-86" chosen by eye and not completely even)
In general, the task is to make a triangle with a background (in the center of the width and along the entire height) from the picture, which could be resized and while the background was not distorted.

Answer 1

<svg version="1.1"   viewBox="0 0 200 200" xml:space="preserve"  preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <svg id="trian" viewBox="0 0 200 200" >
    <pattern id="img_test" width="200" height="200"  patternUnits="userSpaceOnUse">
      <image x=-100 y=0 width="400"  xlink:href="https://image.ibb.co/mtOsjo/test_1.png" />
    </pattern>
    <polygon fill="url(#img_test)" points="0,200 100,0 200,200"/>
  </svg>
  
  <rect id="улёт" x="5"  y="180" width="40" height="20" fill="#c52" />
  <rect id="влёт" x="45" y="180" width="40" height="20" fill="#5c2" />
  <!--<use xlink:href="#trian" x="0" y="0" width="200" height="200"></use>-->
  <animate xlink:href="#trian" attributeType="XML" attributeName="viewBox"
          from="0 0 200 200" to="-500 -500 2000 2000" dur="0.8s"
          begin="улёт.click" fill="freeze" />
  <animate xlink:href="#trian" attributeType="XML" attributeName="viewBox"
          from="-500 -500 2000 2000" to="0 0 200 200" dur="0.8s"
          begin="влёт.click" fill="freeze" />
</svg>

Added buttons for scale animation to make it easier to see the result.
I tried to scale it in the sandbox , everything seems to be even...
If we specify width= in the image , then -x of the image will be equal to the width of the pattern/2 , then the horizontal center of the image is easier to calculate in style using calc=