Question

我有一个包含几列文字的表格，另外一张包含图片（图标）。

我希望缩放图标以适应行的高度，即使调整了表的大小。

This question看起来会有所帮助，但事实并非如此。

当然，我正在寻找一个跨浏览器的解决方案，但我愿意将其限制为＆＃34;现代＆＃34;浏览器。

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td><img src="http://localhost/images/small_gold_star.png"></td>
    </tr>
  </tbody>
</table>

Answer 1

一种选择是将图片设置为td的背景。然后将该图片的background-size属性设置为cover或contain。 cover值将：

将背景图像缩放为尽可能大背景区域完全被背景图像覆盖。一些部分背景图像可能不在背景中定位区域

contain值将：

将图像缩放到最大尺寸，使其宽度和宽度均匀高度可以适合内容区域

这样的事情：

<table>
  <tbody>
    <tr>
      <td>Some text here</td>
      <td>Some more text here</td>
      <td>More and more and more and more and more text here</td>
      <td class="icon"></td>
    </tr>
  </tbody>
</table>

<style>
  td.icon {
    background: url(my-icon.png);
    background-size: cover; /*MAYBE "contain"?*/
    background-repeat: no-repeat;
  }
</style>

使图像与表格行

1 个答案: