html - 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;
}

图像基本上在 Table 中，在 div 中，在 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 上。给你的 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 的宽度使用百分比单位以保持其流畅。

.