如何修复图像以响应不同的屏幕尺寸？

Question

这是我要修复的页面： http://imvbusiness.com/home/

它的某些部分正在适当调整，但其他部分则没有。

我遇到的问题是：

1. 当我缩小浏览器宽度时，某些图像不会根据屏幕大小缩小。如何在缩小屏幕尺寸的同时调整所有图像？
2. 对于缩小的图像，它们在不同的浏览器上会有不同的缩小。在Firefox上，图像的宽度只会减小，我如何按比例调整？ Chrome上的相同图像已正确调整，但它会在图像的顶部和下方添加额外的空间。如何在不增加额外空间的情况下缩小图像尺寸？如何在所有浏览器上使图像表现相同？

3. 对于页面顶部的菜单栏，我怎样才能使它从1行开始，然后在屏幕宽度缩小时开始2行，然后是3行，依此类推，直到最后，每行1个菜单项？

   <div id="page" class="bg_gray container">
       <img src="images/ivan-quote-1-960x300.jpg" style="max-width:100%; height:auto; margin:auto;" />
   </div>
   

和css：

.bg_gray
{
    background-color: #3F3F3F;
}

.container
{
    width: 100%;
    height: auto;
    margin: 0px auto;
    padding: 0px;
}

谢谢！