怎样让a链接包着的图片随页面自适应大小

Question

 <div id="container">
    <div >
        <img src="./ycj1.jpg" style="width:100%;"/>
    </div>
    <div style="height:100px;width:100%;background:#0E1939;text-align:center">
        <a href="index.php?act=store_joinin&op=index"><img src="./mrz.png" onMouseOver="this.src='./mrz_h.png'" onMouseOut="this.src='mrz.png'" style="display:inline-block;padding-top:20px;" /></a>
    </div>
    <div>
        <img src="./ycj11.jpg" style="width:100%;"/>
    </div>
    <div >
        <img src="./ycj2.jpg" style="width:100%;"/>
    </div>
    <div >
        <img src="./ycj3.jpg" style="width:100%;"/>
    </div>
    <div >
        <img src="./ycj4.jpg" style="width:100%;"/>
    </div>
    <div style="height:100px;width:100%;background:#0E1939;text-align:center">
        <a href="index.php?act=store_joinin&op=index"><img src="./rz.png" onMouseOver="this.src='./rz_h.png'" onMouseOut="this.src='rz.png'" style="display:inline-block;padding-top:20px;"/></a><!-- index.php?act=login&op=register&clearSession=true! -->
    </div>
    <div style="height:100px;width:100%;background:#0E1939;text-align:center">
        <a href="index.php?act=store_joinin&op=index"><img src="./sc.png" onMouseOver="this.src='./sc_h.png'" onMouseOut="this.src='sc.png'" style="display:inline-block;padding-top:20px;" /></a>
    </div>
    <div>
        <img src="./ycj41.jpg" style="width:100%;"/>
    </div>  
</div>

_

以上是我的源代码，其中三个a链接包裹的img标签就是我头疼的地方了，这三个是用来做按钮的，上下的图片都可以自适应页面大小，但是这三个按钮就不行，不知道怎么办求助大家

页面原始大小：

页面缩小之后：

Answer 1