表中圖像的比例縮放

我有一個寬度爲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（最好使用鉻）：

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

如果你開始改變結果窗口的大小，你會看到存在的情況，其中右列中的圖像比左列中的圖像小1像素。目標是所有圖像始終具有相同的大小（第二列中的圖像應該與右側的圖像具有相同的寬度/高度）。

我知道問題始終是在表格寬度是奇數像素數時才發出的，因此dosnt允許兩個圖像的相同大小。我正在尋找一些解決這個問題的方法

來源

2013-05-14 xat

也許你可以強制表寬度始終爲偶數。事情大致是這樣的

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

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

當然，你必須要接受一些輕微的對稱性，當窗口寬度爲奇數。

來源

2013-05-14 08:19:38 Simon

表中圖像的比例縮放

回答

相關問題