How to make different sized images responsive? - css

Question

I have two pictures that are equal size on desktop, but on mobile the heights are not the same. How can I keep the heights the same on mobile too without setting a specific height?
See here for screenshots: https://imgur.com/a/agz5T2z.
Here's my code (ReactJS):
HTML:
<div className="container beigeBackground">
<h1>Gallery</h1>
<div className="homeGalleryContainer">
<img src="https://images.pexels.com/photos/1449773/pexels-photo-1449773.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Homepage Gallery 1"></img>
<img src="https://images.pexels.com/photos/6341164/pexels-photo-6341164.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Homepage Gallery 2"></img>
</div>
<button>GALLERY</button>
</div>
CSS:
.container {
padding: 4em;
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.beigeBackground {
background-color: var(--Beige);
padding: 4em 2em;
}
.beigeBackground * {
color: white;
}
.homeGalleryContainer {
display: flex;
flex-direction: column;
padding-top: 4em;
padding-bottom: 3em;
}
.homeGalleryContainer img {
width: 100%;
margin-bottom: 2em;
object-fit: cover;
}
.beigeBackground button {
border-color: white;
}
.beigeBackground button:hover {
background-color: white;
color: var(--Beige);
}
#media screen and (min-width: 768px) {
.beigeBackground {
padding: 4em 0;
}
.homeGalleryContainer {
flex-direction: row;
padding: 4em 0;
padding-left: 2em;
/* to balance out margin-right of each img */
justify-content: center;
align-items: initial;
}
.homeGalleryContainer img {
width: 40%;
margin-bottom: 0;
margin-right: 2em;
}
}
Thank you.

Answer 1

this will make img responsive
.homeGalleryContainer img {
max-width: 100%;
height: auto;
}