JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<div class=frame>
    <span class="helper"></span>
    <img src="https://wru.inschoolzone.com/MatrixVideo/0b5d63de-3c65-44e8-bc43-dca2f6c7c7c5/067e9e6c-b080-4359-a1c5-c625a8b2bd4f.jpg" />
</div>

CSS

.frame {
    width: 427px;
    height: 240px;
    border: 1px solid #EFEFEF;
    white-space: nowrap;
    
    text-align: center;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-width: 427px;
    max-height: 232px;
        border: 1px solid #CCCCCC;
}