How can I resize all photos to the same size?

I have this site:link

but i have the following problem:problem

What I want to do is:

1. the two images must have a width of 33.3333% , but the middle image must remain as it is

another of my problems is when I resize the browser,the middle image is much higher.

CSS

.inline-block{
  display: inline-block;
  vertical-align: top;
}
.left-img,.right-img{
  width: 33.3333%;
}
.left-img{
  background: url("/wp-content/themes/wp_bagel/assets/img/img-01.png");
  background-size: cover;
}
.ctr-img{
  background: url("/wp-content/themes/wp_bagel/assets/img/img-02.png");
  background-size: cover;
}
.right-img{
  background: url("/wp-content/themes/wp_bagel/assets/img/img-03.png");
  background-size: cover;
}

HTML

<div class="left-img inline-block">
   <img src="/wp-content/themes/wp_bagel/assets/img/img-01.png" alt="Mountain View" style="visibility: hidden;">    
</div>

<div class="ctr-img inline-block">
   <img src="/wp-content/themes/wp_bagel/assets/img/img-02.png" alt="Mountain View" style="visibility: hidden;">   
</div>

<div class="right-img inline-block">
   <img src="/wp-content/themes/wp_bagel/assets/img/img-03.png" alt="Mountain View" style="visibility: hidden;">       
</div>