JSFiddle - React, Tailwind, and code Playground

HTML

<a class="img-box">
<img title="" alt="" src="http://dummyimage.com/100x200/000/fff.gif">
</a>
<a class="img-box">
<img title="" alt="" src="http://dummyimage.com/900x200/000/fff.gif">
</a>    
<a class="img-box">
<img title="" alt="" src="http://dummyimage.com/200x900/000/fff.gif">
</a>

CSS

.img-box {
    display: block;
    width: 500px;
    height: 375px;
    
    font-size: 1px;
    line-height: 375px;
    text-align: center;    
    
    background: red;
    margin-bottom: 1px;
}

.img-box img {
    margin-top: -1px;
    max-height: 375px;
    max-width: 500px;
    vertical-align: middle;
}