Question

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

我使用了max-width，这适用于Chrome，Safari和Opera，但在IE和FireFox中它不起作用（图像以完整尺寸显示，这比页面本身的宽度大得多）。

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

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

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

图像基本上位于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和/或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的宽度，以保持流畅。

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

1 个答案: