keep div "inside" an image

I am developing a kind of photo album in "full" screen. I want to display arrows over an image to be able to go to previous/next one.

Here is my attempt:

https://jsfiddle.net/q49wzey6/

html code:

<div class="main">
  <div class="left">
    <a href="http://laurent.delrocq.free.fr/test/left.png" style="outline:0">
      <img src="http://laurent.delrocq.free.fr/test/left.png" alt="#">
    </a>
  </div>
  <div class="right">
    <a href="http://laurent.delrocq.free.fr/test/right.png">
      <img src="http://laurent.delrocq.free.fr/test/right.png" alt="#">
    </a>
  </div>
</div>

css:

html, body {
  height: 100%;
  margin: 0;
}

a{
  outline:0;
}

.main{
    min-height: 100%;
    background-image:    url(http://laurent.delrocq.free.fr/test/img-1.jpg);
    background-size:     contain; 
    background-repeat:   no-repeat;
    background-position: center center;  
    }

.left{
    position:absolute;
    width:20%;
    height:100%;
}

.left a, .right a{
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

The problem is that if the browser window is too large, the arrows move outside of the image

How can I make sure that the arrow stays inside the image and that the image still behaves like background-size: contain; ?