拉伸图像以适应 td

Posted 2023-03-05

【中文标题】拉伸图像以适应 td

【英文标题】：Stretch image to fit in td

【发布时间】：2010-11-13 15:34:47

【问题描述】：

我想在我的 td 单元格中拉伸图像。怎么做。它是一个标签图像，看起来像 |________| 的倒置。我需要将图像放在第一个包含文本“aaa”的 td 单元格中，该单元格将位于该图像的中心。

【参考方案1】：

您无法在不使用 CSS3 的情况下拉伸背景图像。

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

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

【参考方案2】：

使用表格单元格的老式方法是这样的。

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

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

【参考方案3】：

如果您真的想拉伸图像，只需将宽度设置为“100%”并将高度设置为图像的实际高度即可。

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

我建议将您的 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>

【讨论】：

固定尺寸​​的推拉门不是必需的，虽然......但值得一提的是（：

谢谢，您的解决方案帮助我弄清楚如何垂直拉伸 td。

【参考方案4】：

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

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

【参考方案5】：

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

您的 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>