0

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

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

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

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

编辑：

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

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

4

2 回答 2

2

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

我已经在 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>
于 2011-03-14T03:20:14.643 回答
0

我已经通过 JavaScript 解决了我的问题。我找不到一种方法来让所有浏览器都运行良好而不强迫它们。

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

于 2011-03-14T03:19:59.390 回答