JSFiddle - React, Tailwind, and code Playground

HTML

<div id="product-details">

    <div id="product-image-display">
        <div>
            <div>
                <span style="background-image: URL(http://placehold.it/75x20)"></span>
            </div>
        </div>
    </div>

</div>

CSS

div#product-details div#product-image-display {
    position: relative;
    width: 100%;
    overflow: hidden;
}

div#product-image-display:before {
    content: "";
    display: block;
    padding-top: 100%;
}

div#product-details div#product-image-display div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div#product-details div#product-image-display div div {
    display: table;
    width: 100%;
    height: 100%;
}

div#product-image-display div div span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

div#product-details div#product-image-display div div span img {
    height: auto;
    width: auto;
    
}