How can I ensure that an image and variable text inside a div do not exceed the height of the parent div?The image should resize based on the amount of text present.
In the code snippet below, the image occupies the full height of the div (30vh) with text below. I want the image to take up maximum space possible, resizing only enough to accommodate the text within the parent div.
#test {
height: 30vh;
width: 50%;
}
img {
max-height: 100%;
object-fit: cover;
}<div id="test">
<img src="..."><br />
<div>Variable amount of text</div>
</div>If there are any Bootstrap 4 functions available to simplify this, I would like to utilize them.