Scale flex box height to fit image div - html

Question

I am building a chat message and I want to fit an image inside the text bubble. The bubble has a fixed width and should scale its height depending on the image aspect ratio.
I am unable to scale the div to maintain the img aspect ratio. All of the answers found use an <img> tag, while I am using a div and none of that fixed my issue.
This is the desired outcome:
What I have achieved instead is either a very small img (size of an empty speech bubble if I do not impose any vertical or horizontal dimension) or a long img if I impose the width and keep the height dynamic.
.speech-right-wrapper {
max-width: 90%;
display: flex;
flex-direction: column;
}
speech-right-message-container {
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.speech-right-bubble {
position: relative;
background: rgb(154, 226, 255);
box-shadow: 0px 1px 2px gray;
border-radius: 15px 0 15px 15px;
display: flex;
}
.bubble-background {
width: 200px;
height: auto;
overflow: hidden;
}
.bubble-background-img {
position: absolute;
border-radius: 15px 0 15px 15px;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
background: no-repeat;
background-size: cover;
background-position: center;
}
<div class="speech-right-wrapper">
<div class="speech-right-message-container">
...
<div class="speech-right-bubble">
<div class="bubble-background">
<div class="bubble-background-img" v-bind:style="{ 'background-image': 'url(' + require('../assets/img/profiles/' + storyPath + bubble.bubble_background) + ')' }" v-bind:alt="bubble.bubble_background"></div>
</div>
...
</div>
...
</div>
</div>
UPDATE
For clarity, I need the <div class="bubble-background-img"> to be fix in width (say 200px) and height: auto to maintain the image aspect ratio; and I need the <div class="speech-right-bubble"> to scale to fit the image inside.
Also, unfortunately I need to use a <div> tag because v-bind:src seems not to work for local images. If I do:
<img class="bubble-background-img" v-bind:src="'../assets/img/profiles/' + storyPath + bubble.bubble_background"/>
I get this:

Answer 1

You should probably find a workaround for your v-bind:src issue since the correct way to display a content image is via the HTML img element.
That said, there is a solution, but it relies on using the CSS content property for element replacement, which is a fairly recent technology that's apparently still not supported in Microsoft Edge. The following CSS code is the gist of it and worked for me in testing in Firefox 68:
div { content: ('image.jpeg'); max-width: 200px; }
(In theory, a variation of this technique should also work with the more backward-compatible CSS ::before and ::after pseudo-elements, but the image inexplicably doesn't scale in my testing. I didn't spend much time experimenting though.)

Answer 2

I'm not a hundred percent certain what you are going for, but you could try setting the background-size as a percentage?
background-size: 100%;
background-position: center center;
Using a percentage in background size lets you scale one or more axis according to the parent container. (e.g. background-size: 100% 100%; would scale width and height, and give an effect equivalent to the contain value).
Would that work?
(Personally, I would load the image using an element as that's what they are there for, and you could use object-fit as appropriate, but obviously depends on how you've architected the view...)