Schrumpfen Sie die Bildgröße an die Tabellenzelle, die in allen Browsern funktioniert?

Question

Ich habe eine table, die Bilder in ihren Zellen hat. Ich möchte, dass diese Bilder automatisch verkleinert werden, wenn die Fensterbreite reduziert wird. Aber sie sollten nicht über ihre ursprüngliche Größe hinaus erweitern, wenn es zusätzlichen Raum gibt.

Ich habe eine Lösung dafür, die in Chrome funktioniert, aber es funktioniert nicht in Firefox oder Internet Explorer. In Firefox und Internet Explorer werden Bilder nicht verkleinert, wenn die Fensterbreite reduziert wird, stattdessen wird ein Bildlauf angezeigt.

Wie bekomme ich es in allen Browsern zu arbeiten?

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

CodePen (JSFiddle ist nach unten manchmal):http://codepen.io/anon/pen/JhsED

HTML:

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

CSS:

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

Answer 1

Ändern width:auto zu width:100% macht den Trick.

Updated jsFiddle

Answer 2

Versuchen Sie, die max-width auf die größte oder tatsächliche Größe des Bildes zu ändern - 56px. Das wird sicherstellen, dass das Bild nicht größer wird. Sie können auch die maximale Höhe hinzufügen.