JSFiddle - React, Tailwind, and code Playground

HTML

<span>
    <img src="http://placekitten.com/64/64" border="1" height="64" width="64">
</span>
<span>
    <img src="http://placekitten.com/256/256" border="1" height="64" width="64">
</span>
<span>
    <img src="http://placekitten.com/1024/768" border="1" height="64" width="64">
</span>
<span>
    <img src="http://placekitten.com/500/400" border="1" height="64" width="64">
</span>
<span>
    <img src="http://placekitten.com/205/246" border="1" height="64" width="64">
</span>

CSS

span {
    display: inline-block;
    width: 64px;
    height: 64px;
    border: 1px solid #888;
    position: relative;
}

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
    border: 0;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}