IE 和 FireFox 中的流体图像（最大宽度）

Question

我正在尝试进行流畅的设计，因此当调整浏览器窗口大小时，图像会缩小。

我使用了 max-width，它在 Chrome、Safari 和 opera 上运行良好，但在 IE 和 FireFox 中不起作用（图像以完整尺寸显示，比页面本身的宽度大得多）。

我知道有些人可能会告诉我只使用 width: 100%;但这会将小图像的大小调整为父元素的大小，这是不行的。

有人对此有任何解决方案吗？它必须是纯 HTML 和 CSS，没有 JS。

img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    border: 0;
}

图像基本上是在一个div里面的table里面，那是一个div里面的。

不是实际代码（而是简化版本），因为它会占用更多空间：

<div class="blabla">
    <div class="blablabla" style="max-width: 1110px;">
        <table><tr>
            <td> Text, random, ladida, text 
            <img src="random_source.lol"/></td>
        </tr></table>
    </div>
</div>

问题是，如果需要，我不想缩小所有图像，不仅仅是一些。

谢谢。

Ps.：我已经在这里搜索了很多红色主题，但没有成功。

Answer 1

您的代码在浏览器中运行良好。

查看此演示：http://jsfiddle.net/abhitalks/mxmzjnaL/1

问题出在您的桌子上。给你的table 和/或td 一些尺寸和table-layout:fixed; 给你的table。

看到这个：http://jsfiddle.net/abhitalks/mxmzjnaL/2

相关 CSS：

table {
    table-layout: fixed;
    width: 50%;
}
td {
    width: 100%;
}
img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    border: 0;
}

注意：table 的宽度使用百分比单位以保持流畅。

.