Question

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

我知道问题是在表格宽度为奇数像素数时始终发出的，其中dosnt允许两个图像的大小相同。我正在寻找一些解决这个问题的解决方法

Answer 1

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

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

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

当窗口宽度为奇数时，你必须接受一些轻微的不对称。

表中图像的比例缩放

1 个答案: