how to make the image resize based on browser size?

Here's my html

<div class="parent">
  <div class="Home">
      <a href="home.php"><img id="homeinactive" class="homeIconInactive" src="images/navHeader/homeinactiveOver.png"/></a> 
  </div>
</div>

here's my css

.parent {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
}


    img#homeIconInactive:hover{
      content: url("/images/navHeader/homeIconInactive.png") no-repeat;
      position: absolute;
      z-index: 2;
      top: 0.3.8%;
      left:  49.2%;
      width: 55px;
      height: 50px;

    }

.containerHome img {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

it was coded like that because the whole page is just an image embedded to an html to be shown as prototype, only the button on top has the hyperlink..the problem is, whenever I manually resize the browser, the button does not follow the size of the browser, is there a work around for this ?