在怪异模式下，是否可以将 img 的大小调整为其包含的表格单元格？

Question

这似乎是过去的一次爆炸，但由于项目限制，我陷入了怪癖模式和表格......

我正在处理的表格在每个单元格中都有一个图像，其中所有单元格应该具有相同的大小。表的宽度和高度设置为父容器的百分比。

问题是图像不会缩小，无论我做什么，它们似乎都保持原始大小。然后，表格不符合其设置的大小，它已调整大小以容纳所有图像。在标准模式下，我相信图像上的“宽度：100%”更接近我想要实现的目标。

我正在考虑一个 javascript 解决方案，它循环遍历每个图像，计算它们的大小应该是什么并手动调整大小。但这可能会在开始时导致一些加载时间，这并不理想。

编辑：

我在JSBin编写了一个基本示例。我想要实现的是能够设置表格的大小并调整图像的大小，无论是增大还是缩小到单元格。

第四个 jsbin 修订版使用虚拟图像。

Answer 1

我认为我已经解决了这个问题。

我已经在 Chrome、Firefox、Internet Explorer、Safari、Opera 中测试了这个演示；它们都一致地呈现。

• 我必须在每个单元格中添加一个包装 div 。我知道这不太好，但必须这样做才能使其在 Chrome 中工作。
• 我添加了 table-layout:fixed 以使其在 Internet Explorer 中正常工作。

现场演示

CSS：

#mycontainer {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}
#mytable {
    height: 50%;
    width: 50%;
    table-layout: fixed;
}
#mytable div {
    width: 100%;
    height: 100%;
}
#mytable img {
    width: 100%;
    height: 100%;
}

HTML：

<div id="mycontainer">
    <table id="mytable" cellpadding="0" cellspacing="0">
        <tr>
            <td><div><img src="http://dummyimage.com/28x28/000/fff.png&text=Dummy" /></div></td>
            ...
        </tr>
        ...
    </table>
</div>

Answer 2

我已经通过 JavaScript 解决了我的问题。我找不到一种方法可以让所有浏览器都能正常运行而不强制它们。

我基本上循环遍历每个图像，检查其父表的大小应该是多少，然后除以行数以找到图像高度，并除以列数以获得宽度。