2

我在表格中显示 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 小提琴示例。
在 Chrome 中，两个图像都与 div-wrapper 成比例缩放，但在 Firefox 和 IE9 中，图像不缩放。

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

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

4

3 回答 3

3

您只需要将宽度也设置为 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/

查看相关问题：

于 2013-03-01T08:44:52.287 回答
1

在 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 );

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

于 2014-01-21T19:14:34.470 回答
0

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

我不确定该修复程序是否适用于 Webkit，或者只是 Chrome 的 Blink 引擎。该问题仍然影响 Safari 6。

于 2013-08-25T23:04:52.753 回答