<style>

.wrapper {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height:100%;

  display: -webkit-flex;
  -webkit-flex-orientation: horizontal;
  background: #080;
}

img {
  max-width: 100%; 
  max-height:100%;
  background: #00F;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
}

</style>

<div id="test" style="width:500px;height:500px;position:relative">
<div class="wrapper">
  <img id="between" src="resources/hero.png">
</div>
</div>

<script>
document.body.offsetLeft
document.getElementById('test').style.width = '400px'
document.getElementById('test').style.height = '400px'
document.body.offsetLeft
</script>