圍繞圖像緊身貼合

我正在努力嘗試製作一個聊天應用程序，並且需要聊天泡泡以緊密圍繞其內容。它適用於文本，但是當我在泡泡中有圖像時，它會產生問題。下面是我使用圍繞圖像緊身貼合

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

然而，HTML，當我加載圖像我有一大堆的填充過的圖像的一側，DIV不緊緊圍繞圖像包裹。它看起來像這樣：

http://imgur.com/R3j7yO2

更新：我貼了JS撥弄代碼和CSS。 https://jsfiddle.net/dw9aek2y/

我該如何將圖片上的聊天氣泡div貼緊？謝謝！

來源

2016-05-03 ackerchez

後也CSS –

檢查CSS，如果你的形象有屬性顯示：塊;那麼你將有這個問題 –

@ackerchez你可以使用最大寬度爲了保持寬度https://jsfiddle.net/dw9aek2y/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>

來源

2016-05-03 10:53:14

好吧，我明白了。但是如果我想將圖像顯示爲縮略圖而不是完整的呢？我必須動態創建縮略圖版本嗎？我不能調整它嗎？ – ackerchez

@ackerchez你可以調整它。根據您的要求減少最大寬度 –

圍繞圖像緊身貼合

回答

相關問題