There are three images in .row_1, and I want the total width of those three images to match .row_1’s width, while also ensuring that all of the images have the same height. How can I achieve this without hardcoding it?

Example:

Here is a visual representation for better understanding. I want the three images to fit within the div by adjusting its height while ensuring they all have the same height.”

JSX:

<div className='Gallery'>
    <div className='row_1'>
        <img src='/gallery_img_1.png' />
        <img src='/gallery_img_2.png' />
        <img src='/gallery_img_3.png' />
    </div>
</div>

CSS:

.Gallery img {
    display: block;
    object-fit: contain;
}

.Gallery .row_1 {
    display: flex;
    width: 100%;
}