JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square" style="width: 30%">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>

CSS

.square {
    position: relative;
    margin: 20px;
    display: inline-block; /* could be float */
}
.sq-setter-w {
    width: 100%;
    height: auto;
    visibility: hidden;
}
.sq-setter-h {
    width: auto;
    height: 100%;
    visibility: hidden;
}
.sq-content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* just for display */
.sq-setter-w + .sq-content {background-color: cyan}
.sq-setter-h + .sq-content {background-color: yellow}