Question

请你帮我把图像装到桌子上，高度。每当桌子展开时，图像似乎保持其原始尺寸并且不适合桌子的宽度和高度。问题出现在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%; 
}

在IE（IE8，IE9）中，图像不适合表，td，在FF中运行良好

1 个答案: