阻止表格單元適應真實圖像大小

Question

當您按百分比調整大小時，表格單元格不適應調整大小的圖像很有趣。如果你用絕對值調整它的大小，它會完成這項工作。

有沒有解決這個問題的方法？

假設我們有一個寬度爲200px的img。

現在，2個代碼場景。

第一：

<td><img src="..." style="width: 50%; height: auto;" /></td> 

二：

<td><img src="..." style="width: 100px; height: auto;" /></td> 

我會假設在兩種情況下它的外觀一樣，但事實並非如此。 在第一種情況下，td的寬度仍爲200px。 只有在第二種情況下，td調整爲100px寬度。

百分比調整大小對我來說非常重要。有這個問題的任何CSS技巧？

實施例：http://jsfiddle.net/xndks9r1/

Answer 1

隨着：

<td><img src="..." style="width: 100px; height: auto;" /></td> 

你的圖像的寬度設定爲一特定值。

隨着：

<td><img src="..." style="width: 50%; height: auto;" /></td> 

你的圖像的寬度設定爲50％的任何的<td>的寬度。在您的小提琴中，<td>的寬度由右欄中的文字設置。

Answer 2

當您編寫<img style="width: 50%;" />時，50％並不是指原始圖像大小的50％。它實際上是指父母寬度的50％，在這種情況下父母是<td>。