Whenever I try to adjust the size of the image inside the div element, it doesn't seem to change. The div itself functions properly, but the image remains fixed in size.
Is there a way to scale the image proportionally when resizing the div?
div.column {
display: block;
position: relative;
max-width: 800px;
margin: 0 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: 0;
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>