JSFiddle - React, Tailwind, and code Playground

HTML

<a class="example-image-link" href="#">
    <img src="http://placehold.it/100x100.jpg" />
</a>
<a class="example-image-link" href="#">
    <img src="http://placehold.it/200x100.jpg" />
</a>
<a class="example-image-link" href="#">
    <img src="http://placehold.it/100x200.jpg" />
</a>
<a class="example-image-link" href="#">
    <img src="http://placehold.it/500x500.jpg" />
</a>

CSS

.example-image-link {
      display: block;
      width: 150px;
      height: 150px; 
      line-height: 150px; 
      text-align: center;
      background: #faa;
      margin: 2px;
    }
    .example-image-link img {
      vertical-align: middle;
      width: auto;
      height: auto;
      max-width: 140px;
      max-height: 140px;
    }