it-swarm.com.de

Bildgröße auf Tabellenzelle verkleinern, was in allen Browsern funktioniert?

Ich habe einen table, der Bilder in seinen Zellen hat. Ich möchte, dass diese Bilder automatisch verkleinert werden, wenn die Fensterbreite reduziert wird. Sie sollten jedoch nicht über ihre native Größe hinaus erweitern, wenn zusätzlicher Platz vorhanden ist.

Ich habe eine Lösung, die in Chrome funktioniert, aber nicht in Firefox oder Internet Explorer. In Firefox und Internet Explorer werden Bilder nicht verkleinert, wenn die Fensterbreite verringert wird. Stattdessen wird ein Bildlauf angezeigt.

Wie kann ich es mit allen Browsern funktionieren lassen?

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

CodePen (JSFiddle ist manchmal ausgefallen):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;
}
10
Ahmad

Ändern Sie width:auto in width:100%, um den Trick auszuführen.

Aktualisiertes jsFiddle

8
Mr Lister

Ändern Sie die maximale Breite auf die größte oder tatsächliche Größe des Bildes - 56px . Dadurch wird sichergestellt, dass das Bild nicht größer wird. Sie können auch die maximale Höhe hinzufügen.

1
Dallas