Уменьшить размер изображения, чтобы он соответствовал ячейке таблицы, которая работает во всех браузерах?

у меня естьtable который имеет изображения в своих клетках. Я хочу, чтобы эти изображения автоматически уменьшались при уменьшении ширины окна. Но они должныне расширить за пределы своего родного размера, когда естьдополнительное пространство вокруг.

У меня есть решение для этого, которое работает в Chrome, но оно не работает в Firefox или Internet Explorer. В Firefox и Internet Explorer изображения не уменьшаются при уменьшении ширины окна, а вместо этого появляется прокрутка.

Как мне заставить его работать во всех браузерах?

JSFiddle: http://jsfiddle.net/ahmadka/GeDxr/

CodePen (иногда JSFiddle не работает): http://codepen.io/anon/pen/JhsED

HTML:


    
        
            
                
                    <img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/moneybookers.png">
                
                
                    <img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/2checkout.png">
                
                
                    <img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/visa.png">
                
                
                    <img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/mastercard.png">
                
            
        
    

CSS:

.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: auto;
}

Ответы на вопрос(2)

Ваш ответ на вопрос