圖像不適合表格，IE（IE8，IE9）中的td在FF中效果很好

Question

您能否幫助我將圖像擬合到桌子上，td高度。 只要表格展開，圖片就似乎保持其原始大小，而不適合表格的寬度和高度。 該問題正在IE8，IE9中發生。 在Firefox中似乎工作正常。 請在下面找到html和CSS：

HTML：

<table cellspacing="0" cellpadding="0" class="special-offer-banner">
        <tbody><tr>
            <td width="100%" height="100%" class="special-offer-image">
                <img width="100%" height="100%" alt="BOGO &amp; more!" src="/wcsstore/BonTon/images/bonton/gateway_bogo_web.jpg">
            </td>
            <td class="special-offer-messages">
                <p class="message-container">
                    <span class="strong spo-offer-msg1">wordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswords</span><br>
                    <span class="spo-offer-msg2">wordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswords</span>
                </p>
            </td>
            <td class="more-special-offers">
            </td>
        </tr>
    </tbody>
</table>

CSS：

.special-offer-banner {
border: 2px solid #333333;
width: 100%;
height: 120px;
margin: 5px 0;
display: table;
table-layout: fixed;
}

.special-offer-banner .special-offer-image {
width: 340px;
}

.special-offer-banner .special-offer-image img {
display: block;
}

Answer 1

在html5中，img標簽的width和height屬性不能為％。 我會嘗試添加CSS規則以使圖像的寬度/高度為100％。

.special-offer-banner .special-offer-image img {
   display: block;
   width:100%; 
   height:100%; 
}