web-dev-qa-db-ja.com

すべてのブラウザで機能する表のセルに合わせて画像サイズを縮小しますか？

セルに画像があるtableがあります。ウィンドウの幅が狭くなったときに、これらの画像を自動的に縮小したい。しかし、周囲に余分なスペースがある場合は、notで本来のサイズを超えて拡張する必要があります。

Chromeで機能する解決策がありますが、FirefoxやInternet Explorerでは機能しません。 FirefoxおよびInternet Explorerでは、ウィンドウの幅を小さくしても画像が縮小せず、代わりにスクロールが表示されます。

どのようにすればすべてのブラウザで動作しますか？

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

CodePen（JSFiddleがダウンする場合があります）：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;
}
htmlcsscross-browserimage-resizing
10
Ahmad

変化する width:autoからwidth:100%トリックを行います。

更新されたjsFiddle

8
Mr Lister

Max-widthを画像の最大または実際のサイズ-56pxに変更してみてください。これにより、画像が大きくならないようになります。 max-heightを追加することもできます。

1
Dallas