CODEWITHSUNDEEP
cssmaterialize
Marinos An
Marinos An

Reputation: 10828

How can I add a responsive image to a table cell in materialize?

This shows my image in a small circle:

<div class="row">
  <div class="col s1">
    <img src="images/img1.jpg" alt="" class="circle responsive-img">
  </div>
</div>

Now, I want to add the same image, in a table cell (td) and show it in a circle of the same size.

Should I copy/paste the above code as is inside the td ? It seems too verbose. Is there a simpler way?

Note: I know that a solution could be to write some custom css, but the reason why I use a css framework is to not write css, especially for common things like this.

Upvotes: 2

Views: 280

Answers (3)

Agustin Mita
Agustin Mita

Reputation: 103

You can use a button circle and set image with tag responsive-img, example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<div>
    <table>
      <thead>
        <tr>
            <th>Image</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <a class="btn-floating waves-effect waves-light btn-tiny white">
              <img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
            </a>
          </td>
          <td>Jellybean</td>
          <td>$3.76</td>
        </tr>
        <tr>
          <td>Jonathan</td>
          <td>Lollipop</td>
          <td>$7.00</td>
        </tr>
        <tr>
          <td>
            <a class="btn-floating waves-effect waves-light btn-tiny white">
              <img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
            </a>
          </td>
          <td>Lollipop</td>
          <td>$7.00</td>
        </tr>
      </tbody>
    </table>
</div>

Upvotes: 0

Sean Doherty
Sean Doherty

Reputation: 2378

There is no need to mix the grid system with the table. This will suffice:

<img height="30" width="30" class="circle" src="https://picsum.photos/50" alt="My Circular Image">

The .circle class in materialize just adds this CSS:

.circle {
   border-radius: 50%;
}

The responsive-img class add this CSS:

img.responsive-img {
    max-width: 100%;
    height: auto;
}

This is to stop images breaking out of containers, and is of no help to you here. What you need to do is use a square image and control the height of the image inline, as shown above.

Codepen.

Upvotes: 2

johannchopin
johannchopin

Reputation: 14853

You can just add the classes directly to the table elements like:

    <tr class="row">
      <td class="col s2">
        <img src="src" alt="" class="circle responsive-img" />
      </td>
    </tr>

Here is an example:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Item Name</th>
      <th>Item Price</th>
    </tr>
  </thead>

  <tbody>
    <tr class="row">
      <td class="col s1">
        <img src="https://i.sstatic.net/4iGwt.jpg?s=328&g=1" alt="" class="circle responsive-img" />
      </td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Jonathan</td>
      <td>Lollipop</td>
      <td>$7.00</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions