JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image_container"><a href="http://www.skintype.ca/assets/background-x_large.jpg"></a>

</div>

CSS

div.image_container {
    padding: 7px;
}
div.image_container a {
    background-color: #999;
    width: 200px;
    height: 180px;
    background-image: url('http://www.skintype.ca/assets/background-x_large.jpg');
    background-size: contain;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}
div.image_container img {
    width: 100%;
}