缩小图像大小以适应表格单元格，它适用于所有浏览器？

我有一个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; 
}

来源

2013-07-14 Ahmad

更改width:auto到width:100%是否有窍门。

Updated jsFiddle

来源

2013-07-14 19:06:32

嗯...我同意在JSFiddle中，建议的解决方案确实有效，但是当我将它应用于我的实际页面时，单元格图像变得比其原始大小更大。你可以在这里看到它：http：//blu-rays.pk/index.php ..转到底部，在页脚部分，在中心你会看到相同的图标.. – Ahmad

我已经证实在我的实际页面中应用了相同的CSS（只有规则名称从'autoResizeImage'更改为'autoResizeTableImage'）。其他一切都是一样的，所以我不知道为什么图像在那里扩展..而且这个也发生在Chrome中！ – Ahmad

尝试改变最大宽度，以图像的最大或实际尺寸 - 56px。这将确保图像不会变大。您也可以添加最大高度。

来源

2014-02-06 18:01:38 Dallas

缩小图像大小以适应表格单元格，它适用于所有浏览器？

回答

相关问题