表格中图像的比例缩放答案

【问题标题】：Proportional Scaling of Images in a Table表格中图像的比例缩放
【发布时间】：2013-05-14 16:19:38
【问题描述】：

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

这是 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 个像素。目标是所有图像始终具有完全相同的大小（第二列中的图像应与右侧图像具有相同的宽度/高度）。

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

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

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

【讨论】：