CODEWITHSUNDEEP
htmlcss
parsecer
parsecer

Reputation: 5106

CSS fit image into table cell: without harcoding pixels, fill available space, but not more

JSFiddle: https://jsfiddle.net/1yqvfxdj/

html:

<table>

  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
    <th>Year</th>
    <th>Picture</th>
  </tr>
  
  <tr>
    <td>John Smith</td>
    <td>25</td>
    <td>Software Engineer</td>
    <td>2022</td>
    <td>
      <img src= "https://www.pinclipart.com/picdir/middle/95-958614_man-icon-person-logo-png-clipart.png"/>
    </td> 
  </tr>
 
  <tr>
    <td>John Smith</td>
    <td>25</td>
    <td>Software Engineer</td>
    <td>2022</td>
    <td>
      <img src= "https://www.pinclipart.com/picdir/middle/95-958614_man-icon-person-logo-png-clipart.png"/>
    </td> 
  </tr>
  
  <tr>
    <td>John Smith</td>
    <td>25</td>
    <td>Software Engineer</td>
    <td>2022</td>
    <td>
      <img src= "https://www.pinclipart.com/picdir/middle/95-958614_man-icon-person-logo-png-clipart.png"/>
    </td> 
  </tr>
  
  <tr>
    <td>John Smith</td>
    <td>25</td>
    <td>Software Engineer</td>
    <td>2022</td>
    <td>
      <img src= "https://www.pinclipart.com/picdir/middle/95-958614_man-icon-person-logo-png-clipart.png"/>
    </td> 
  </tr>
</table>

css:

td,th  {
  padding: 1rem;
  text-align: center;
  
  cursor: pointer;
}

tr:hover  {
  background-color: silver;
}

img  {
  width: 40px;
}

How it looks:

enter image description here

As can be seen from the picture, the image when the width is hardcoded to 40px fills the available space in the row/cell, but not more. How should I do it without hardcoding pixels, but making sure it's responsive to change of screen size?

Doing width: 100% on the img makes the images too big - it increases the height and width of the rows, as opposed to filling only available space in the given row and column.

Upvotes: 1

Views: 128

Answers (1)

ash
ash

Reputation: 1055

By adding width and height on percentage with limiting them as min and maximum value. Div Become responsive

https://codepen.io/ash_000001/pen/VwrQNMm?editors=1100


table{
  max-width: auto;
  width: 100%;
  min-width: 2rem;
  
  
}
th, td{
  white-space: wrap;
  overflow: hidden;
}

td,th  {
  white-space: wrap;
  text-overflow: ellipsis;
  
  padding: 0.1rem;
  text-align: center;
  max-width: 3rem;
  min-width:0rem;

  cursor: pointer;
}

tr:hover  {
  background-color: silver;
}

img  {
  width: 100%;
  height: 100%;
}
<table>

  <tr>
    <th>Name</th>
    <th>Age</th>
    <th st>Occupation</th>
    <th>Year</th>
    <th>Picture</th>
  </tr>
  
  <tr>
    <td>John Smith</td>
    <td>25</td>
    <td>Software Engineer</td>
    <td>2022</td>
    <td>
      <img src= "https://www.pinclipart.com/picdir/middle/95-958614_man-icon-person-logo-png-clipart.png"/>
    </td> 
  </tr>
 
  <tr>
    <td>John Smith</td>
    <td>25</td>
    <td>Software Engineer</td>
    <td>2022</td>
    <td>
      <img src= "https://www.pinclipart.com/picdir/middle/95-958614_man-icon-person-logo-png-clipart.png"/>
    </td> 
  </tr>
  
  <tr>
    <td>John Smith</td>
    <td>25</td>
    <td>Software Engineer</td>
    <td>2022</td>
    <td>
      <img src= "https://www.pinclipart.com/picdir/middle/95-958614_man-icon-person-logo-png-clipart.png"/>
    </td> 
  </tr>
  
  <tr>
    <td>John Smith</td>
    <td>25</td>
    <td>Software Engineer</td>
    <td>2022</td>
    <td>
      <img src= "https://www.pinclipart.com/picdir/middle/95-958614_man-icon-person-logo-png-clipart.png"/>
    </td> 
  </tr>
</table>

Upvotes: 2

Related Questions