Question

我有

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

我需要（通过bootstrap或直接css）底部图像为“响应”（在内容宽度后调整大小）

这是我的代码（Plunker here）。我在width:100%;和td img-responsive上尝试了img，但它没有用。

  <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类）。

Answer 2

从style="width:100%;"中取出td并将其放在图片上。表格单元格将自动调整大小。

查看新的plunker here

表中的响应图像使用bootsrap

2 个答案: