Currently, I am in the process of constructing a chat message layout and I am facing a challenge where I need to incorporate an image within a text bubble. The width of the bubble is fixed, but the height should adjust based on the aspect ratio of the image.
Despite my efforts, I have been unable to resize the div to maintain the image's aspect ratio. Most of the solutions I've come across involve using an <img> tag, but in my case, I am working with a div and have not been successful in resolving this issue.
Here is the desired outcome I am aiming for:
https://i.sstatic.net/0Ic6G.png
https://i.sstatic.net/cZs8K.png
However, the result I have achieved so far is either a tiny img (comparable to an empty speech bubble when no vertical or horizontal dimensions are imposed) or an elongated img when I set the width and leave the height flexible.
.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
To clarify, I require the
<div class="bubble-background-img">height: auto to preserve the image aspect ratio. Additionally, I need the <div class="speech-right-bubble">Unfortunately, I am obliged to use a <div> tag, as v-bind:src does not seem to work for local images. When I attempt the following:
<img class="bubble-background-img" v-bind:src="'../assets/img/profiles/' + storyPath + bubble.bubble_background"/>
I encounter this issue: https://i.sstatic.net/vbFZB.png