0

幅が 100% の HTML テーブルがあります。Table には 2 つの行があり、それぞれに 2 つのセルがあります。各セルには、幅が 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をセットアップしました（クロムを使用するのが最適です）：

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

結果ウィンドウのサイズを変更し始めると、右の列の画像が左の列の画像よりも 1 ピクセル小さい場合があることがわかります。目標は、すべての画像が常に正確に同じサイズになることです (2 列目の画像は、右側の画像と同じ幅/高さを持つ必要があります)。

テーブルの幅が奇数のピクセル数で、2 つの画像を正確に同じサイズにすることができない場合、常に問題が発生することを認識しています。この問題の回避策を探しています

4

1 に答える 1

0

おそらく、テーブルの幅を常に偶数にすることができます。だいたいこんな感じ

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

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

もちろん、ウィンドウ幅が奇数の場合は、わずかな非対称性を受け入れる必要があります。

于 2013-05-14T08:19:38.760 に答える