Уменьшить размер изображения, чтобы он соответствовал ячейке таблицы, которая работает во всех браузерах?
у меня есть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;
}