Question

我在表格中显示img时遇到问题：

<table>
<tr>
<td>
    <div>    
        <img src="https://www.google.ru/images/srpr/logo4w.png"/>
        <img src="http://pictar.ru/data/media/24/nature__463_.jpg"/>
    </div>
    </td>
</tr>
</table>

用css：

div {
    height: 100%;
    width: 100%;
    border:2px solid red;
}
div img {
    max-width: 100%;
    max-height: 100%;
}

JS Fiddle example。
在Chrome中，两个图像都按比例缩放到div-wrapper，但在Firefox和IE9图像中不能缩放。

我如何在任何地方获得Chrome行为？

答案：唯一的解决方案是使用javascript。我的跨浏览器解决方案是：http://jsfiddle.net/TAE3w/21/

Answer 1

您只需将宽度设置为100％。

div img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

http://jsfiddle.net/samliew/TAE3w/9/

对所有三种浏览器的最一致的影响是：

div img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

http://jsfiddle.net/samliew/TAE3w/15/

参见相关问题：

Answer 2

在Firefox中，如果指定为百分比，则max-width不起作用，但如果给定精确值，则无效。使用javascript将maxWidth设置为图像宽度。不需要包装。

<img onload="this.style.maxWidth=(this.getAttribute('width')?this.getAttribute('width'):this.naturalWidth).toString() + 'px'; this.style.width='100%'; this.style.height='auto';" src="yourimage.jpg" />

如果您不想更改图片标签，请在所有图片上使用javascript功能。

function makeImagesResponsive(){
    var images = document.getElementsByTagName('img');
    for(var i = 0; i < images.length; ++i) {
        images[i].style.maxWidth=(images[i].getAttribute('width')?images[i].getAttribute('width'):images[i].naturalWidth).toString() + 'px';
        images[i].style.width='100%';
        images[i].style.height='auto';  
    }
}
window.addEventListener( "load", makeImagesResponsive, false );

当然，您只能选择网站特定部分的图片，或按类名或其他属性进行过滤。

Answer 3

为了记录，最近在桌面上支持最大宽度的Chrome。

我不确定该修补程序是应用于Webkit还是Chrome的Blink引擎。问题仍然影响Safari 6。

表格中的最大宽度

3 个答案: