给多个图纸相同的尺寸，然后缩放它们

所以，朋友们，我面临这样的问题：我有几张不同尺寸的图片，我需要先将它们在HTML页面上调整为相同的尺寸，然后使它们可伸缩，这样当屏幕尺寸变化时，它们保留它们的形状......在这里我很困惑，我可以想象如何以百分比或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;
}
}