Fit image

HTML

<div id="square-image-container" class="container">
    <img alt="square-image" src="https://thumbs.dreamstime.com/z/color-child-hand-print-15834644.jpg" />
</div>

<div id="wide-image-container" class="container">
    <img alt="wide-image" src="https://thumbs.dreamstime.com/z/color-child-hand-print-15834644.jpg" />
</div>

<div id="high-image-container" class="container">
    <img alt="high-image" src="https://thumbs.dreamstime.com/z/color-child-hand-print-15834644.jpg" />
</div>

CSS

.container {
    margin: 20px;
    
    width: 500px;
    height: 200px;
    position:relative; 
    border: 1px solid red;  
}

.container img {
    max-width:100%;
    max-height:100%;
    position:absolute; 
    top:50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}