Aspect ratio of some of the images in my image gallery is wrong

I have an image gallery with many images , but some of them are with wrong aspect ratio. One is upside down - which is with width 4608 -3465 height . The others are flipped right or left with ( w3024 - h4032) . Of course there are others that are displayed correctly( most are , i have about 5 images that are with wrong aspect ration)

html:

<div id="imageContainer">
    <div class="imgBox">
      <img id="image_id_001" alt="" src="Photos/_DSC0150.jpg">
      <p>Hotel</p>
     </div>
     <div class="imgBox">
      <img id="Fruit_Tree" alt="" src="Photos/_DSC0226.jpg">
      <p>Fruit Tree</p>
     </div>
     <div class="imgBox">
      <img id="image_id_001" alt="" src="Photos/_DSC0150.jpg">
      <p>Hotel</p>
     </div>
     <div class="imgBox">
      <img id="Fruit_Tree" alt="" src="Photos/_DSC0226.jpg">
      <p>Fruit Tree</p>
     </div>
     <div class="imgBox">
      <img id="image_id_001" alt="" src="Photos/_DSC0150.jpg">
      <p>Hotel</p>
     </div>
     <div class="imgBox">
      <img id="Fruit_Tree" alt="" src="Photos/_DSC0226.jpg">
      <p>Fruit Tree</p>
     </div>
</div>

CSS :

#imageContainer img {
  width: 90%;
  height: 400px;
  box-sizing: border-box;
}

.imgBox{
  float: left;
  width: 33.33%;
}

I tried with object-fit , but it does not work . Tried with width:100% and height:100% , still nothing .

I am not using Bootstrap, nor do i want to use it. Just plain html and css, as those are the ruquirements of the projec. Is there a possible solution ?