在 HTML 中，如何将 table 单元格中的图像调整为同一行中的文本？

Question

我正在为一个网站创建一个 'About' 部分，这是一个 table 具有三个等宽列的部分：一个头像、一个段落和另一个段落（见下面的屏幕截图）。

我想让图像自动调整大小（保持其纵横比）为最大文本的高度 - 在单元格内左对齐 - 无需对任何 height/width 值进行硬编码。但是，我玩了很多，似乎没有什么可以调整图像大小。

/* an element that's one-third the width of its container */

.third-width {
  width: 33%;
}


/* the headshot photo */

#headshot {
  border-radius: 5px;
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
}

#about-table td {
  background-color: pink;
  padding: 1vw;
  text-align: justify;
  vertical-align: top;
  font-family: var(--body-font);
  font-weight: lighter;
}

<table id="about-table">
  <tr>
    <td class="third-width">
      <img id="headshot" src="https://via.placeholder.com/80" alt="None">
    </td>
    <td class="third-width">
      <p>[... SOME TEXT ...]</p>
    </td>
    <td class="third-width">
      <p>[... SOME TEXT ...]</p>
    </td>
  </tr>

当前状态：

我想要什么：

谢谢！

Answer 1

使用CSS Flex代替table
制作单元格flex: 1; position: relative;
使用 100% W/H 和 object-fit: cover 使图像 position: absolute; 不扭曲图像

/* QuickReset */

* { margin:0; box-sizing: border-box; }


/* About component */

.About {
  display: flex;
}

.About > div {
  position: relative;
  flex: 1;
  outline: 1px solid #000;
  padding: 20px;
}

.About > div img {
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="About">
  <div><img src="https://placekitten.com/408/287" alt="Catz!"></div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur tempora voluptatibus eligendi dolorem. Excepturi perspiciatis ipsa porro, minus ea.</div>
</div>

<div class="About">
  <div>Lorem ipsum</div>
  <div>Molestiae sunt nisi nostrum sed,  ipsa porro, minus ea.</div>
  <div><img src="https://placekitten.com/500/300" alt="Catz!"></div>
</div>

<div class="About">
  <div><img src="https://placekitten.com/310/290" alt="Catz!"></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur</div>
  <div>Lorem ipsum</div>
</div>

在 HTML 中，如何将 table 单元格中的图像调整为同一行中的文本？

In HTML, how do I make an Image in a table cell resize to text in the same row?

html

css

html-table