How do I get pictures of all different sizes to fit in a grid

This is the link to my code here . How do I get my bottom two images to show the full length of the image while still fitting within the grid?

Here is a snippit of my CSS:

#photos {

/* Prevent vertical gaps */

line-height: 0;

​

-webkit-column-gap: 0px;

-moz-column-count: 5;

-moz-column-gap: 0px;

column-count: 2;

column-gap: 20px;

}

​

img > a-3{

object-fit: 100%;

height: 100%;

}

​

#photos img {

/* Just in case there are inline attributes */

width: 100% !important;

height: auto !important;

​

}

​

/* captions */

.project-tile{

background: #247291;

height: 100px;

box-sizing: content-box;

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-around;

​

}