Question

以下是代码：

<table border="1" cellpadding="2" cellspacing="2" height="250">
<tbody>
    <tr>
        <td>
            <div style="background: url('image path goes here';); width: 300px; height: 250px; position: relative;">
<p style="width: 180px; font-size: 12px; margin-top: 35px; position: absolute;">My TEXT goes here....</p>
        </td>
    </tr>
</tbody>
</table>

现在，我需要增加图像的宽度，或者需要左图缩放图像。

我该怎么做？

我试过直接给出宽度..但它不起作用......

任何建议或建议都会感激不尽......

Answer 1

您正在使用图片作为父div的背景。如果你只想改变图像的大小，你应该使用img标签。类似下面的例子

    <table border="1" cellpadding="2" cellspacing="2" height="250" width="300">
<tbody>
    <tr>
        <td>
            <div >
                <img style="float:left;" src="http://www.gravatar.com/avatar/03bc7f86de865926a1cb5036198d00a0?s=32&amp;d=identicon&amp;r=PG" width="150px" height="125px" /></div>
<p style=" display: block; width: 280px; font-size: 12px; margin-top: 35px; position: relative;">We understand you want to choose benefits that suit you and your life. And we regularly review things so we're always offering benefits you say you want to see.</p>
        </td>
    </tr>
</tbody>
</table>

Answer 2

您可以使用CSS3 background-size属性。

.myelement {
    background-size: 275px 125px; /* input your values here */
}

或者你可以使你成像内联而不是DIV的背景，并使用常规的宽度和高度来定尺寸。

关于您发布的代码的几点意见：

表格仅用于显示表格数据，不能用于简单的铺设目的。
您没有关闭DIV标记。

如何在使用position：relative时增加图像的宽度

2 个答案: