<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: scale-down;</p>
      <img class="size scale-down border" src="https://mik2062.jp/wp-content/uploads/2024/05/Designer-3-3.jpeg">
    </td>
  </tr>
</table>

.scale-down {
  object-fit: scale-down;
}
.size {
  width: 200px;
  height: 150px;
}

/* 見た目とレイアウト用 */
* {
  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;
}