Shrink image size to fit table cell, which works i

问题:

I have a table which has images in its cells. I want these images to shrink automatically when the window width is reduced. But they should not expand beyond their native size when there's extra space around.

I have a solution for this which works in Chrome, but it does not work in Firefox or Internet Explorer. On Firefox and Internet Explorer, images do not shrink when the window width is reduced, and instead a scroll appears.

How do I get it to work on all browsers ?

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

CodePen (JSFiddle is down sometimes): 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;
}

回答1:

Change width:auto to width:100% does the trick.

Updated jsFiddle

回答2:

Try changing the max-width to the largest or actual size of the image - 56px. That will ensure that the image gets no larger. You might also add max-height.