Tight fit div вокруг изображения

Question

Я работаю над попыткой сделать приложение для чата и нуждаюсь в чатах, чтобы плотно поместиться вокруг их содержимого. Он работает хорошо для текста, но когда у меня есть изображение в пузыре, оно становится проблематичным. Вот HTML, который я использую

<div class="fromMe msgBubble"> 
    <img src="{{image.location}}" style="width:50%;"> 
    <br> 
    <span class="msgDate">2011-01-26 01:52:16</span> 
</div> 
<div class="clearfix"></div> 

Однако, когда я загрузить изображение У меня есть целая куча отступа в сторону изображения, и DIV не плотно обернуть вокруг изображения. Это выглядит следующим образом:

http://imgur.com/R3j7yO2

UPDATE: Я отправил JS скрипку с кодом и CSS. https://jsfiddle.net/dw9aek2y/

Как я могу плотно подогнать чат-пузырь div вокруг изображения? Спасибо!

Answer 1

ширина Снять и добавить максимальную ширину и каждая вещь будет хорошо

#messageBubbleArea { 
 
    font: 14px Arial; 
 
    margin-top: 20px; 
 
    padding: 0 10px; 
 
    width: 99%; 
 
} 
 

 
.fromMe::before { 
 
    border-bottom: 9px solid #0b93f6; 
 
    border-right: 9px solid rgba(0, 0, 0, 0); 
 
    bottom: 0; 
 
    content: ""; 
 
    position: absolute; 
 
    right: -8px; 
 
} 
 

 
*::after, *::before { 
 
    box-sizing: border-box; 
 
} 
 

 
.fromMe { 
 
    background-color: #0b93f6; 
 
    border-radius: 8px 8px 0; 
 
    color: white; 
 
    float: right; 
 
    margin-left: auto; 
 
    text-align: right; 
 
} 
 

 
.fromThem, .fromMe { 
 
    clear: both; 
 
    margin-top: 20px; 
 
    max-width: 80%; 
 
    padding: 5px 9px; 
 
    position: relative; 
 
}

<div id="messageBubbleArea"> 
 
    <div class="fromMe msgBubble">Hey babe<br> 
 
    <span class="msgDate">2011-01-26 00:09:30</span> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div class="fromMe msgBubble"> 
 
    <img style=" max-width:200px;" src="http://images.clipartpanda.com/rainbow-clip-art-rainbow.gif"><br> 
 
    <span class="msgDate">2011-01-26 01:52:16</span> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
</div>