Question

我需要建立一个时事通讯，公司不想要div，只有表格。此外，它必须兼容各种浏览器。所以不能使用，显示，响应式字体，这样的东西。并且所有CSS必须是内联的。

在一些单元格中，我需要有3个图像，每个图像各有一个，相同的大小完全对齐。他们需要对细胞的大小做出反应，占据td的100％。

问题在于，随着浏览器改变大小，图像的大小不同。示例：如果浏览器的宽度发生变化，则Pic1宽度变为150px，但Pic2变为152px。 Pic3变为151px。

有没有办法防止这种情况发生？

我所说的一个小例子。图像大小相同，但它们仍然彼此不同。（当然这些图像存储在本地，因此您无法真正看到任何内容。只需在此处发布以了解代码。）

<!DOCTYPE html>
<html>
<head>
    <title>Table Test</title>
</head>
<body>
    <table cellspacing=0 cellpadding=0 style=" width:80%; ">

        <tr>
            <td style="border: 2px solid #000;">
                <img style=" width: 100%; display:block" src="1.png">
            </td >
            <td style="border: 2px solid #000;">
                <img style=" width: 100%; display:block" src="2.png">
            </td >
            <td style="border: 2px solid #000;">
                <img style=" width: 100%; display:block" src="1.png">
            </td>
        </tr>

    </table>
</body>
</html>

提前感谢任何可以帮助我的人。 ;）

Answer 1

尝试将此类附加到img

.img-responsive
{
    display: block;
    max-width: 100%;
    height: auto;
}

表

1 个答案: