css - 如何根据文本内容拉伸(stretch)图片？

Question

我正在尝试使用 CSS 制作聊天对话气泡。气泡为图片，文字根据用户动态变化输入。我正在尝试使图像适合文本，这意味着如果用户输入一个词，图像将以词的大小显示，如果他输入一个句子，它将以句子的长度显示。

如何根据文字内容拉伸(stretch)图片？

<div className="msg_container">                
    <img  className="conversation_image" src={require(`./../assets/images/speech_bubble.png`)} alt="Conversation"/>
    <div dir="rtl"  className="user_message_text">
        { message.messageText }                   
    </div> 
</div>

Answer 1

这可能是您正在寻找的:

var p = document.getElementById('text')

document.getElementById('input').addEventListener('input', function() {
  p.innerHTML = event.target.value;
})

p {
  background: linear-gradient(#e66465, #9198e5);
  background-size: cover;
  color: white;
  width: min-content;
}

<div>
  <p id="text">random text</p>
</div>

<input id="input" placeholder="add text">