JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<div class="my" style="width: 400px">
    <span id="image">
        <span id="image-inner">
    </span>
</div>
<p>13</p>

CSS

#image {
    display: inline-block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url('http://gary.zap.in.ua/images/sample-2.jpg'); 
}
#image-inner {
    display: block;
    height: 0;
    padding-top: 63.3%;
}
.my { outline:1px solid black}