如何按x轴拉伸表格单元格中的背景图像？ [复制]答案

【问题标题】：How to stretch background image in a table cell by x axis? [duplicate]如何按x轴拉伸表格单元格中的背景图像？ [复制]
【发布时间】：2018-08-20 01:37:23
【问题描述】：

我目前正在为网站设计导航栏；我使每个导航栏“选项卡”成为表格中的一个数据单元格，每个单元格中都有一个背景图像。因为我的背景图片不是单元格的确切宽度，所以背景图片没有跨越单元格的宽度。

如何在表格单元格中拉伸背景图像的 x 轴，同时保持图像的整个高度？或者换句话说，我如何不保持背景图像的纵横比，同时仅使用 CSS 将其拉伸到某个方向？我对图像的垂直度感到满意，但我想将其水平拉伸。

希望这是有道理的。

这是我所拥有的，代码方面：

<div class="navbar">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" text-align=>
  <tr>
    <td class="navtab"><a href="index.html">HOME</a></td>
    <td class="navtab"><a href="hours-location.html">HOURS AND LOCATION</a></td>
    <td class="navtab"><a href="#">ABOUT US</a></td>
    <td class="navtab"><a href="#">CONTACT US</a></td>
  </tr>
</table>
</div>

.navtab {
    background-image: url(navtab.png);
    background-size: 100%, auto;
    height: auto;
    width: 200px;
    display: table-cell;
}

【问题讨论】：

标签： html css

【解决方案1】：

下面的注释示例，关键样式是background-size，我用它来水平拉伸图像而不是垂直拉伸：

.skinny-image {
  /* using 100x100 image */
  background: url(https://source.unsplash.com/random/100x100);
  /* 100% width on the x-axis, use image dimensions for y-axis */
  background-size: 100%, auto;
  height: 100px;
  /* but our cell is 200px wide */
  width: 200px;
  display: table-cell;
}

&lt;div class="skinny-image"&gt;&lt;/div&gt;

使用上面的示例代码：

.navtab {
    background-image: url(https://source.unsplash.com/random/100x100);
    background-size: 100%;
}

<div class="navbar">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" text-align=>
  <tr>
    <td class="navtab"><a href="index.html">HOME</a></td>
    <td class="navtab"><a href="hours-location.html">HOURS AND LOCATION</a></td>
    <td class="navtab"><a href="#">ABOUT US</a></td>
    <td class="navtab"><a href="#">CONTACT US</a></td>
  </tr>
</table>
</div>

【讨论】：

kfedorov91 有一个很好的答案，但如果你遇到问题，你可能想看看这个链接。它解释了如何覆盖表的属性。这些属性将/可能会限制您想要进行的任何更改。 stackoverflow.com/questions/1519271/…
@kfedorov91 我编辑了我的帖子以包含我的代码。我尝试使用您提供的代码，但高度太高并且没有在我的选项卡底部显示曲线。你能从我的代码中看出我做错了什么吗？
@ElizabethK 为了说明的目的，我在示例中添加了明确的高度和宽度，这些不是必需的。我已经使用您添加到问题中的示例代码用新的 sn-p 更新了我的答案。