How to resize images using flexbox?

Question

I am having issues with coding the home page of my photo grid exactly like this one here:

If you check out my code here:

You can see that the top two images of the first row are distorted. I would like the full photo grid to show up in both my tablet and desktop version of my site but I'm currently having issues with resizing the images.

May someone help me please?

I've already tried setting the width to 100% and height to auto and it didn't work.

@media screen and (min-width: 768px) {

  .top-section  {
    display:flex;
    width:100%;
    height:100%;
  }

  .section-one img {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 384px;
    height: 491px;
  }

   .section-two img {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 384px;
    height: 491px;
  }

Answer 1

The centering of the images in your first example is realized through javascript (maybe you noticed it, anyway...)

I would make these edits: you don't need to use display:flex (or at least I guess so), .top-section must always have width: 100% (remove the media query on it); add to .section-one and section-two another class, maybe .section-box with this properties

.section-box {
    height: 70vh;
    width: 100%;
}

@media screen and (min-width: 768px){
    .section-box {
        width: 50%;
        float: left;
    }
}

then, add to .main-image

.main-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;   
} 

and remove the img tag inside each .main-image div; you will display the image setting the background-image property, for example

.section-one .main-image {
    background-image: url("img/baja-hero.png");
}