<table>
  <tr>
    <td colspan="3">
      <p class="title">画像を縮小して横方向に余白ができる場合</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>画像</p>
      <img src="https://mik2062.jp/wp-content/uploads/2024/05/Designer-3-3.jpeg">
    </td>
    <td>
      <p>表示サイズ</p>
      <div class="size border">
        <p></p>
      </div>
    </td>
    <td>
      <p>object-fit: contain;</p>
      <img class="size contain border" src="https://mik2062.jp/wp-content/uploads/2024/05/Designer-3-3.jpeg">
    </td>
  </tr>
</table>

.contain {
  object-fit: contain;
}

.size {
  width: 240px;
  height: 160px;
}

/* 見た目とレイアウト用 */
* {
  box-sizing: border-box;
  list-style: none;
}
td {
  text-align: center;
  margin: 0 auto;
  vertical-align: top;
}
table {
  border-collapse: separate;
  border-spacing: 20px 0;
}
.border {
  border: dotted 3px lightblue;
  background: lightyellow;
  font-size: 32px;
}
.title {
  font-weight: bold;
  margin: 20px 0 0;
}