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

Question

This shows my image in a small circle:

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.

user_8583669 · Answer

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

Here is an example:




  
    
      Name
      Item Name
      Item Price
    
  

  
    
      
        
      
      Eclair
      $0.87
    
    
      Alan
      Jellybean
      $3.76
    
    
      Jonathan
      Lollipop
      $7.00

user_5858395 · Answer

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

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.

user_9105925 · Answer

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

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

3 Answers