CODEWITHSUNDEEP
csstwitter-bootstrap
serge
serge

Reputation: 15229

Responsive images in table using bootsrap

I have

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

I need (via bootstrap, or direct css) the bottom images to be "responsive" (resize after the content width)

Here is my code (Plunker here). I tried width:100%; on td and img-responsive on img, but it didn't work.

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

Upvotes: 0

Views: 18105

Answers (2)

sn3ll
sn3ll

Reputation: 1685

Take the style="width:100%;" off of the tds and put it on the images themselves. The table cells will size themselves automatically.

Check out new plunker here

Upvotes: 1

Andy Taylor
Andy Taylor

Reputation: 102

img-responsive has changed to img-fluid so maybe try that first (bootstrap class).

Upvotes: 5

Related Questions