JSFiddle - React, Tailwind, and code Playground

HTML

<div class="aspectwrapper">
    <img class="aspectspacer" src="http://simpaticointeractive.com/images/moon-spacer.png" />
    <div class="content">
        Text should stay within image boundaries
    </div>
</div>

CSS

.aspectwrapper {
height: 70%;
position: relative;
}
.aspectspacer {
height: 100%;
border: 1px #000 solid;
}
.content {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
outline: thin dashed green;
}