Bootstrap 4 is the framework I am currently using. Below is the HTML code I have written:
<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>
Here is my CSS:
.sprite{
text-align: center;
position: relative;
}
.sprite-span-level{
position: absolute;
right: 5px;
}
.sprite-img{
width: 100%;
}
The output can be viewed here: https://jsfiddle.net/f7u9k5so/. My goal is to set a specific size for the image and have the container div adjust accordingly. How can I achieve this?