时间戳

首页 > 解决方案 > 如何按x轴拉伸表格单元格中的背景图像？

html - 如何按x轴拉伸表格单元格中的背景图像？

问题描述

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

如何在表格单元格中拉伸背景图像的 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;
}

标签： htmlcss

解决方案

下面的注释示例，关键样式是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>

推荐阅读