表格中的最大宽度答案

【问题标题】：Max-width in the table表格中的最大宽度
【发布时间】：2014-01-22 08:18:57
【问题描述】：

我在表格中显示 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/

【问题讨论】：

标签： google-chrome firefox html-table css

【解决方案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/

查看相关问题：

【讨论】：

但在这种情况下，谷歌图像缩放比实际更宽
这很有趣，但我的问题是让所有三个浏览器的行为都与 chrome 中的第一个示例相同，我的问题特别描述了stackoverflow，但解决方案对我不起作用

【解决方案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 );

当然，您可以只从网站的特定部分中选择图像，或者按类名或其他属性过滤它们。

【讨论】：

【解决方案3】：

作为记录，最近在 Chrome 中登陆的表格支持最大宽度。

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

【讨论】：