使圖像的高度與表格行的其餘部分相同

Question

我有一個包含多列文本的表格，另外還有一個包含圖像（圖標）的表格。

我希望縮放圖標以適應行的高度，即使在調整表的大小時也是如此。

This question看起來像它會幫助，但它沒有。

當然，我正在尋找一個跨瀏覽器的解決方案，但我很樂意將其限制爲「現代」瀏覽器。

<table> 
    <tbody> 
    <tr> 
     <td>One</td> 
     <td>Two</td> 
     <td><img src="http://localhost/images/small_gold_star.png"></td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

一個選項是將圖像設置爲您的td的背景。然後將該圖像的background-size屬性設置爲cover或contain。所述cover值意願：

縮放的背景圖像，使得 背景區域由背景圖像完全覆蓋要儘可能大。一些 份背景圖像可能無法考慮到背景 定位區域之內的

的contain值將：

縮放圖像以最大尺寸，使得它的兩個寬度和其 高度適合內容區域內

事情是這樣的：

<table> 
    <tbody> 
    <tr> 
     <td>Some text here</td> 
     <td>Some more text here</td> 
     <td>More and more and more and more and more text here</td> 
     <td class="icon"></td> 
    </tr> 
    </tbody> 
</table> 

<style> 
    td.icon { 
    background: url(my-icon.png); 
    background-size: cover; /*MAYBE "contain"?*/ 
    background-repeat: no-repeat; 
    } 
</style>