图像不适合表格，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%; 
}