<!doctype html>
<style>

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

  display: -webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: stretch;
  background: #080;
}

img {
  max-width: 100%; 
  height:100%;
  background: #00F;
}

</style>

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

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