在图像周围紧密配合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

更新:我发布了一个带有代码和CSS的JS Fiddle。https://jsfiddle.net/dw9aek2y/

如何在图片周围紧贴聊天气泡div？谢谢!

Answer 1

去掉width并添加max-width，一切都会好起来的

​

#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>

​