div img的位置及大小缩放
我有一张大图片，一张小图片放在大图片上面，现在大图片缩小（放大），
我的要求：
1.小图片相对于大图片的位置不要变化；2.小图片大小要和大图片成等比例缩放；
请问该怎么实现，我的代码实现不了：
CSS:
.img_div{
width:1200px;
height:568px;
margin:-8px 0 -8px -8px;
border:0px;
background-image:url('img/main.jpg');
background-size:100% 100%;
position:relative;
}
Html:
 <div class = "img_div">
    <img src="img/foot.png" style="position:relative;z-index:2;left:710px;top:2860px;">
</div>
请问该怎么办，谢谢。
------解决方案--------------------
两张图片都放在一个div里，图片position都设为absolute，用百分比设置图片大小，大图width:100%，小图自定，通过改变div宽度来放大

不太清楚你的小图是怎么个相对大图位置不要变化，不过都可以通过以百分比设置小图的top和left达到目的