image-percent-max-height-expected.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: center;

  background: #080;
}

img { 
  height:400px;
  background: #00F;
}

</style>

<div id="test" style="width:400px;height:400px; background-color:#080; position:relative">
  <div class="wrapper"><img id="between" src="resources/hero.png"></div>
</div>