Question

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

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

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

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

修改

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

第4次jsbin修订版使用虚拟图像。

Answer 1

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

我在Chrome，Firefox，Internet Explorer，Safari，Opera中测试了这个演示;它们都是一致的。

我必须在每个单元格中添加一个包装div。我知道这不是很棒，但必须要做才能让它在Chrome中运行。
我添加了table-layout: fixed以使其在Internet Explorer中正常运行。

Live Demo

<强> 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解决了我的问题。我找不到一种方法可以让所有浏览器在不强迫它们的情况下发挥出色。

我基本上遍历每个图像，检查它们的父表格大小应该是什么，然后将其除以行数以找到图像高度，然后按列除以宽度。

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

2 个答案: