0

我有一个宽度为 100% 的 HTML 表格。该表有两行，每行有两个单元格。每个单元格包含相同的图像，宽度=100%，高度=自动。所以图像在单元格内按比例缩放。

这是HTML：

<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src="http://idevicegazette.com/wp-content/uploads/2013/03/htc-one-sample-002-200x200.jpg" />
            <div class="info"></div>
        </td>
        <td>
            <img src="http://idevicegazette.com/wp-content/uploads/2013/03/htc-one-sample-002-200x200.jpg" />
            <div class="info"></div>
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://idevicegazette.com/wp-content/uploads/2013/03/htc-one-sample-002-200x200.jpg" />
            <div class="info"></div>
        </td>
        <td>
            <img src="http://idevicegazette.com/wp-content/uploads/2013/03/htc-one-sample-002-200x200.jpg" />
            <div class="info"></div>
        </td>
    </tr>
</table>

这里是 CSS：

table
{
    width: 100%;
}

table td
{
    width: 50%;
    position relative;
}

img
{
    width: 100%;
    height: auto;
}

为了描述这个问题，我设置了一个 jsfiddle（最好使用 chrome）：

http://jsfiddle.net/Fk8vQ/3/

如果您开始更改结果窗口的大小，您将看到右列中的图像比左列中的图像小 1 像素的情况。目标是所有图像始终具有相同的大小（第二列中的图像应与右侧图像具有相同的宽度/高度）。

我知道当表格宽度是奇数像素数时总是会发出问题，这不允许两个图像具有相同的大小。我正在寻找解决此问题的方法

4

1 回答 1

0

也许您可以强制表格宽度始终为偶数。大致是这样的

width = window.innerWidth;
if( width % 2 != 0 ){
    width -= 1;
}

document.getElementById("tableId").width = width;

当然，当窗口宽度为奇数时，您将不得不接受一些轻微的不对称。

于 2013-05-14T08:19:38.760 回答