缩小图片大小以适合表格单元格，它适用于所有浏览器？ [英] Shrink image size to fit table cell, which works in all browsers?

问题描述

我有一个表在其单元格中有图像。我希望这些图像在窗口宽度减小时自动缩小。但是，如果有额外的空间，他们应 扩展超出其原生大小。

我有一个解决方案它在Chrome中工作，但它不能在Firefox或Internet Explorer中工作。在Firefox和Internet Explorer中，当窗口宽度减小时，图像不会缩小，而是会出现滚动。

如何使其在所有浏览器？ http ：//jsfiddle.net/ahmadka/GeDxr/

CodePen（JSFiddle有时会失效）： http://codepen.io/anon/pen/JhsED

HTML：

 < div class =imageTable> 
< table> 
< tbody> 
< tr> 
< td> 
< img class =autoResizeImagesrc =http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/moneybookers.png/> 
< / td> 
< td> 
< img class =autoResizeImagesrc =http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/2checkout.png/> 
< / td> 
< td> 
< img class =autoResizeImagesrc =http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/visa.png/> 
< / td> 
< td> 
< img class =autoResizeImagesrc =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; 
} 
  

解决方案

更改 width：auto 到 width：100％即可。

更新jsFiddle

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

解决方案

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

Updated jsFiddle

这篇关于缩小图片大小以适合表格单元格，它适用于所有浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！