'How do I make table row have the same height and not depend on the size of the images?

As you can see in the code snippet, the height of the table rows is slightly different depending on the height of the images.

I have the image tag set to height: auto; and if I change this to say 300px, the images they all get the same size, but it's not what I want because I still want to keep the aspect ratio.

table {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 4rem;
  border: 1px solid #c4c4c4;
  border-collapse: collapse;

  font-size: 1rem;
}

thead {
  background: #fbfbfb;
  border: 1px solid #c4c4c4;
}

th,
td {
  height: 5rem;
  padding: 1rem;
}

th {
  text-align: start;
  background: #fbfbfb;
}

td {
  background: #fff;
}

tr {
  border: 1px solid #c4c4c4;
}

.read-more {
  color: #fff;
  background: #005c68;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  padding: 1rem;
}

.price {
  font-weight: 700;
}

img {
  width: 100%;
  max-width: 7em;
  height: auto;
}

@media screen and (max-width: 1225px) and (min-width: 1045px) {
  .priority-5 {
    display: none;
  }
}

@media screen and (max-width: 1045px) and (min-width: 835px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
}

@media screen and (max-width: 835px) and (min-width: 300px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
  .priority-3 {
    display: none;
  }
}

@media screen and (max-width: 300px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
  .priority-3 {
    display: none;
  }
  .priority-2 {
    display: none;
  }
}
<table>
  <thead>
    <tr>
      <th className="priority-1">Operatör</th>
      <th className="priority-2">Surfmängd</th>
      <th className="priority-3">Bindningstid</th>
      <th className="priority-4">Samtal</th>
      <th className="priority-5">Sms</th>
      <th className="priority-6">Pris</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className="priority-1">
        <img src=https://www.telia.se/.resources/discover/resources/imgs/logo236x200.png alt=logo />
      </td>
      <td className="priority-2">124 GB</td>
      <td className="priority-3">24 mån</td>
      <td className="priority-4">
        Fria
      </td>
      <td className="priority-5">
        Fria
      </td>
      <td className="priority-6 price">99 kr</td>
      <td>
        <button className="read-more" type="button">
          Läs mer
        </button>
      </td>
    </tr>

    <tr>
      <td className="priority-1">
        <img src=https://1.bp.blogspot.com/-f39w3NL2fYM/UJrk7keg5ZI/AAAAAAAAPTM/dGo3uETNoD4/s1600/Comviq+logo+2012.png alt=logo />
      </td>
      <td className="priority-2">124 GB</td>
      <td className="priority-3">24 mån</td>
      <td className="priority-4">
        Fria
      </td>
      <td className="priority-5">
        Fria
      </td>
      <td className="priority-6 price">99 kr</td>
      <td>
        <button className="read-more" type="button">
          Läs mer
        </button>
      </td>
    </tr>

    <tr>
      <td className="priority-1">
        <img src=https://www.telia.se/.resources/discover/resources/imgs/logo236x200.png alt=logo />
      </td>
      <td className="priority-2">124 GB</td>
      <td className="priority-3">24 mån</td>
      <td className="priority-4">
        Fria
      </td>
      <td className="priority-5">
        Fria
      </td>
      <td className="priority-6 price">99 kr</td>
      <td>
        <button className="read-more" type="button">
          Läs mer
        </button>
      </td>
    </tr>

    <tr>
      <td className="priority-1">
        <img src=https://1.bp.blogspot.com/-f39w3NL2fYM/UJrk7keg5ZI/AAAAAAAAPTM/dGo3uETNoD4/s1600/Comviq+logo+2012.png alt=logo />
      </td>
      <td className="priority-2">124 GB</td>
      <td className="priority-3">24 mån</td>
      <td className="priority-4">
        Fria
      </td>
      <td className="priority-5">
        Fria
      </td>
      <td className="priority-6 price">99 kr</td>
      <td>
        <button className="read-more" type="button">
          Läs mer
        </button>
      </td>
    </tr>

  </tbody>
</table>
css


Solution 1:[1]

There are many ways to do this, you can specify the height of the parent element.

.container {
  border: 1px solid red; /* Just to visualize the parent element*/
  height: 150px; /* The container height it's lower than the child */
  margin: 5rem 0; /* Just some space between the containers */
}
<!-- With overflow-y visible (by default) -->
<div class="container"> <!-- style="overflow-y:visible" -->
  <img src="http://via.placeholder.com/200x200"/>
</div>

<!-- With overflow-y hidden -->
<div class="container" style="overflow-y:hidden">
  <img src="http://via.placeholder.com/200x200"/>
</div>

Once it's "overflowed" you ajust the image as you want.

Solution 2:[2]

Let me suggest a few options:

  1. You could specify the aspect ratio manually, if you know what you need, using css aspect-ratio property. Then specify whatever height you need so that it fits in the table row.
  2. You could mention the height and width, and let the image content be adjusted accordingly, using the object-fit. This could somewhat obscure the contents, so you should take it with a pinch of salt.
  3. You could mention the max-height property for the image, along with a width=auto, so that it scales down to the required size.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Miguel Rolex
Solution 2 sayandcode

Related Questions