Задать нескольким рисункам одинаковые размеры, а затем отмасштабировать их

Итак, друзья, столкнулся с такой проблемой: есть несколько рисунков разных размеров, мне нужно на странице ХТМЛ сначала привести их к одному размеру, а затем сделать их масштабируемы, чтобы при изменении размера экрана, они сохраняли свою форму... И вот тут я крепко озадачился, я представляю, как сделать масштабирование в процентах или em, а так же знаю, как привести изображения к единому размеру, четко прописав их размеры, напирмер, в пикселях, но вот как обьединить эти две задачи в одну, я ума не приложу, так как по сути они противоречат друг другу... Хелп!

<table class="tab_image">
    <tr>
      <td rowspan="4" width="80%"><img src="./image/Map.jpg" height="100%" width="100%"></td>
      <td id="td_btn_castle"></td>
    </tr>
    <tr>
      <td><img src="./image/building/lands/Farm.jpg" class="image_building_btn btn4" onclick="transition(this, 'village')" title="Lands"></td>
    </tr>
    <tr>
      <td><img src="./image/No_image.jpg" class="image_building_btn btn4" onclick="" title="No events" disabled></td>
    </tr>
    <tr>
      <td><img id="btn_travel_map" src="./image/Traveling.jpg" class="image_building_btn btn4" onclick="traveling(this)" title="Traveling"></td>
    </tr>
  </table>

.tab_image {
  border-spacing: 2mm;
  height: 90%;
  width: 90%;
}
.image_building_btn {
  height: 10rem;
  width: 20rem;
  margin-left: 5mm;
  border: 3px solid green;
  border-radius: 0.5rem;
}
.btn4 {
  cursor: pointer;
}
.btn4[disabled] {
  border: 3px solid red;
  opacity: 0.45;
}
@media (hover: hover) {
  .btn4:hover {
    transform: translateY(-2px);
    border: 3px solid green;
  }
  .btn4[disabled]:hover {
   border: 3px solid grey !important;
}
}