javascript - 将图像放在整个单元格中

Question

我想在网页中显示多个表格，并在表格单元格内显示标题和图像。 为此，我创建了一个表并使用了 <div>标签分配 <td>. 的宽度和高度

请在下面找到代码

<table width="100%" height="100%"><tr><td>
    <div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
        <section>
            <header style="background: gray;width:198.5px;text-align: center">Header1</header>
        </section>
        <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="tableDemo2" />
    </div></td>
    <td>
        <div  style="position:absolute;border: 1px solid black;width:200px;height:200px";>
            <section>
                <header style="background: gray;width:198.5px;text-align: center">Header2</header>
            </section><br><br>
            <br><br> <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
        </div></td>

    </tr></table> 

我想在 <td> 的整个单元格中显示该图像.标题部分应显示在整个空间中的图像之后。请建议我需要添加什么代码才能使其工作。目前我无法正确设置 <td> 边框内的图像。 .或者有什么好的方法可以实现这一点。 jsfiddle:http://jsfiddle.net/4S6gR/103/ 我想使用 html/css 实现这一点。

Answer 1

看了你的 fiddle 后，我想你的意思是你想让图像覆盖单元格中除标题之外的其余区域。

如果是:

检查这个Fiddle

添加了一个新的 div 来覆盖 div，为标题 18px 赋予了浏览器呈现的高度，然后为包含图像的 div 赋予了 182px 的高度.