Html 在怪癖模式下，是否可以使用img'；是否调整其包含的表格单元格的大小？

这看起来像是过去的爆炸，但由于项目限制，我被怪癖模式和表格困住了

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

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

我正在考虑一个javascript解决方案，它在每个图像上循环计算它们的大小并手动调整大小。但这可能会在开始时造成一点加载时间，这并不理想

编辑：

#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%;
}

<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>

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

---

第四个jsbin版本使用了虚拟图像。

我已经通过JavaScript解决了我的问题。我找不到一种方法来让所有的浏览器都在不强制的情况下运行良好

我基本上是在每个图像上循环检查它们的父表大小，然后用行数除以图像高度，用列数除以宽度。

我想我已经解决了这个问题

我已经在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%;
}

<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>

HTML:

#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%;
}

<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>

...
...

您是否只在Internet Explorer中谈论怪癖模式？（其他浏览器也有）你能举一个你正在使用的代码的简单例子吗？在这个阶段，我只在Internet Explorer中确认了它的怪癖，但据我所知，我在所有浏览器中使用的doctype都会触发怪癖：doctype将在所有浏览器中触发怪癖模式。怪癖模式“IE”和怪癖模式“其他浏览器”可能有所不同。我的意思是“您的项目使用的浏览器是什么？只是Internet Explorer？这是一个内部项目吗？”。（一个测试用例在这里仍然会有帮助。事实上，如果没有它，我不会尝试解决这个问题。你可以使用它轻松生成测试图像。）感谢thirtydot，我不知道这两个服务。它不是一个内部项目，因此作为一项要求，它需要跨浏览器。我们支持IE8、Chrome和Firefox。这个演示，就像你在Firefox中描述的那样，它看起来已经坏了。然而，我认为它在IE8中看起来已经正确了。是这样吗？它在IE8中看起来已经正确了吗？哇，三十多岁，我没想到我会收到你的回复！我现在就给你答复。这个解决方案的CSS>JavaScript。而且我的JavaScript还远远不够完美，它把页面上的其他东西都弄乱了。很有趣，我在你的答案发布15秒后才发布了我的答案：）希望这能奏效！适用于所有浏览器。这样一个简单而优雅的解决方案。非常感谢。在我的测试中，即使没有div，它也能正常工作。主要是“表布局：固定；”这是我以前从未见过的。再次感谢。