10

tableセルに画像がある があります。ウィンドウの幅が縮小されると、これらの画像が自動的に縮小されるようにします。ただし、周囲に余分なスペースがある場合は、元のサイズを超えて拡張しないでください。

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;
}
4

2 に答える 2

1

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

于 2014-02-06T18:01:38.203 に答える