Resize image along with the div

Question

I am unable to resize the image that is within the div. The div is working properly, but the image is inside the div remains the same size.

How to grow and shrink the image along with the div?

div.column {
    display: block;
    position: relative;
    max-width: 800px;
    margin: 0px auto
}

div.fixedratio {
    padding-top: 100%;
    display: block;
    position: relative;
    margin: 0;
    background-color: #eee;
    background-image: url('http://i.imgur.com/4pgtZwz.png');
    background-size: cover;
    -moz-background-size: cover;
    background-position: center;
    border: 1px solid #999;
    background-position: center center;
}

.tengah {
  left: 50%;
  top: 50%;
  position: absolute;
  margin-top: 0px;
  margin-left: 10px;
}


<div class="column">
   <div class="fixedratio">
      <div class="tengah">
           <img src="http://s9.postimg.org/5ocnzd117/icon_player_soccer.png">
      </div>
   </div>
</div>

http://jsfiddle.net/jeffernandes/f05jh0gs/4/

Answer 1

You can use the background-size:contain CSS property on the image to make it scale with the div as it re-sizes.