10

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;
}
Ahmad
  • 12,886
  • 30
  • 93
  • 146

2 Answers2

9

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

Updated jsFiddle

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • 1
    Hmm ... I agree that within JSFiddle, the suggested solution does work, but when I apply it on my actual page, the cell images become bigger than their native size. You can see it here: http://blu-rays.pk/index.php .. Go right to the bottom, in the footer section, and in the center you'll see the same icons .. – Ahmad Jul 14 '13 at 19:20
  • 1
    I've confirmed that the very same CSS is applied in my actual page (only the rule name was changed from `autoResizeImage` to `autoResizeTableImage`) .. Everything else is the same, so I don't know why images are expanding there .. And this happens in Chrome too ! – Ahmad Jul 14 '13 at 19:22
1

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.

Dallas
  • 11
  • 1