JSFiddle - React, Tailwind, and code Playground

HTML

<div><a href="images/01.jpg"><img src="https://placehold.jp/24/cc9999/993333/450x150.png" alt=""></a></div>
<div><a href="images/01.jpg"><img src="https://placehold.jp/24/cc9999/993333/150x450.png" alt=""></a></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
div > a {
    border: 1px solid #666;
    width: 200px;
    height: 200px;
	overflow: hidden;
    padding: 0;
	position: relative;
    margin: 10px;
    display: inline-block;
    vertical-align: top; 
}
div > a > img {
    left: 50%;
    max-height: 200px;
    max-width: 200px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}