如何使表行具有相同的高度而不依赖于图像的大小？

Question

正如您在代码片段中所看到的，表行的高度因图像的高度而略有不同。

我将图像标记设置为高度: auto；如果我将其更改为300 it，它们的大小都相同，但这不是我想要的，因为我仍然希望保持高宽比。

​

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>

​

Answer 1

让我提出几个备选方案：

1. 您可以使用css aspect-ratio属性手动指定高宽比(如果您知道需要什么)。然后指定所需的高度，使其适合表行。
2. 您可以提到高度和宽度，并使用object-fit对图像内容进行相应的调整。这可能会使内容有点模糊，所以您应该稍微加一点盐。
3. 您可以提到图像的max-height属性，以及width=auto，以便缩小到所需的大小。

Answer 2

有许多方法可以这样做，您可以指定父元素的高度。

​

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

​

一旦它“溢出”，你就会得到你想要的形象。