我正在使用Bootstrap4。这是我的html：

<div class="sprite container d-inline-block bg-info rounded p-1">
   <span class="sprite-span-level">Top-right text over image</span>
   <img class="sprite-img" src="someimage">
   <span class="sprite-span-nickname">text under image</span>
</div>

这是我的CSS：

.sprite{
    text-align: center;
    position: relative;
}
.sprite-span-level{
    position: absolute;
    right: 5px;
}
.sprite-img{
    width: 100%;
}

最终结果如下：https://jsfiddle.net/f7u9k5so/。 我想要将图像强制为一定大小，并相应地使容器div适合。我该怎么办？