css - 使用 Bootstrap 在表中响应图像

Question

我有

----------------
     header
----------------
| t1 | t2 | t3 |
----------------
| i1 | i2 | i3 |

我需要(通过 Bootstrap 或直接 css)底部图像“响应”(根据内容宽度调整大小)

这是我的代码 (Plunker here)。 我在 td 上尝试了 width:100%; ，在 img 上尝试了 img-responsive，但没有成功.

  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

  <table style="width:100%">
    <thead>
      <tr>
        <th colspan=3 class="text-center">My Pics</th>
      </tr>
      <tr>
        <th class="text-center">Trees</th>
        <th class="text-center">Cats</th>
        <th class="text-center">Bulding</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:100%;" class="text-center"><img class="img-responsive" src="https://unsplash.it/164/90"/></td>
        <td style="width:100%;" class="text-center"><img class="img-responsive" src="https://unsplash.it/164/91"/></td>
        <td style="width:100%;" class="text-center"><img class="img-responsive" src="https://unsplash.it/164/92"/></td>
      </tr>
    </tbody>
  </table>

Answer 1

img-responsive 已更改为 img-fluid 所以也许先尝试一下( Bootstrap 类)。