Question

我目前正在为网站设计导航栏；我将每个导航栏“制表”为表中的数据单元，并在每个单元格中添加了背景图片。由于我的背景图片不是单元格的确切宽度，因此背景图片无法覆盖单元格的宽度。

如何在保持表格的整个高度的同时在表格单元格中拉伸背景图片的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;
}

Answer 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;
}

<div class="skinny-image"></div>

使用上面的示例代码：

.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>

如何通过X轴拉伸表格单元格中的背景图像？

1 个答案: