JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel contain"></div>
    <div class="panel cover"></div>

CSS

.panel {
        width: 200px;
        height: 200px;
        background-image: url('http://www.allamericanbaseballacademy.com/users/SamuelWernick6047/docs/Image//Bucknell%20University%20Baseball.gif');
        border: 2px solid red;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 10px;
    }

        .panel.contain {
            background-size: contain;
        }

        .panel.cover {
            background-size: cover;
        }