拉伸图像以适应td

Question

我想在我的td单元格中拉伸图像。 怎么做。 它是一个标签图像，看起来像这个| ________ |倒置。 我需要将图像放在第一个td单元格中，其中包含文本'aaa'将出现在此图像的中心。

Answer 1

如果不使用CSS3，则无法拉伸背景图像。

在CSS3中，您具有background-size属性，您可以为其提供100％将图像拉伸到容器的100％。 但是并非所有浏览器都支持CSS3。

您可以使用图像标记并将宽度和高度设置为100％来实现此目的。

Answer 2

如果你真的想要拉伸你的图像，只需使宽度=“100％”并将高度设置为等于图像的实际高度。

但实际上你应该使用滑动门技术http://www.alistapart.com/articles/slidingdoors/与css背景图像和一些额外的标记;

我建议将你的aaa包装在SPAN中并使用TD和SPAN代替滑动门文章中的LI和A.

<td style="background: transparent url('images/tab-left.gif') left top no-repeat">
    <span style="background: transparent url('images/tab-right.gif') right top no-repeat; margin-left: 10px">aaa</style>
</td>

Answer 3

如果表格是固定大小，并且您知道图像的大小，则可以使用CSS应用图像。

td.tab {
  background: url(images/tab.jpg) no-repeat;
  height: 50px;
  width: 200px;
}

Answer 4

通常，您将此作为背景图像，特别是当您有弯曲边缘时。

您的HTML可能如下所示：

<ul class="tabs">
    <li><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
</ul>

和CSS：

<style type="text/css" media="screen">
    .tabs, .tabs li {
        margin:0; padding:0;
        list-style-type:none;
    }
    .tabs li {
        background:url(tab.gif) no-repeat left top;
        padding-left:5px;
        float:left;
        width:100px;
    }
    .tabs li a {
        background:url(tab.gif) no-repeat right top;
        padding-right:5px;
        display:block;
        text-align:center;
    }
</style>

Answer 5

使用表格单元格的旧学校方式是这样的。

<table>
  <tr>
    <td image="tab-left.gif" width="12" height="32"></td>
    <td background="tab-middle.gif" height="32"> --- your tab's text goes here --- </td>
    <td image="tab-right.gif" width="12" height="32"></td>
  </tr>
</table>

发生的事情是您将标签图像分成三个部分。 左边包括左曲线。 中间包括从标签的某些部分取得的垂直条纹，没有曲线，右侧包括右曲线。