html - CSS + 不同大小的文本区域以适合图像

Question

http://jsfiddle.net/adamadam123/qv2yR/

以上是我目前正在使用的代码。下面是我想要实现的图像。

它基本上是一个聊天框“IM”，我有一个蓝色和粉红色的图像，需要能够获得不同数量的文本才能放在图像中。

我也尝试使用图像作为 CSS 背景，但发现它没有拉伸以适应文本。还尝试了浮动和绝对定位。

任何帮助将不胜感激。

谢谢

    <div class="chatMessengerBody">

        <div class="chatMessengerChatBubble chatMessengerChatBubbleBlueWrapper">
            <img src="images/chat-messenger-chat-bubble-blue.png" class="chatMessengerChatBubble chatMessengerChatBubbleBlue"/>
            <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            </p>
        </div>

        <div class="chatMessengerChatBubble chatMessengerChatBubblePinkWrapper">
            <img src="images/chat-messenger-chat-bubble-pink.png" class="chatMessengerChatBubble chatMessengerChatBubblePink"/>
            <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?</p>
        </div>

    </div>

Answer 1

为什么不使用一些 CSS 和 CSS3 圆角来代替图像：

.chatMessengerChatBubblePinkWrapper {
    background:#fff8f2;
    border:1px solid #ffeadb;
    -webkit-border-radius: 5px;
    border-radius:5px;
}

Answer 2

http://jsfiddle.net/qv2yR/10/

CSS

.blue {
    background: #EBF7FF;
    border: 1px solid #D4F1FD;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color :#6B95B0;
    margin-bottom: 5px;
    padding: 5px;    
    width: 200px;
}

.pink {
    background: #FFF8F2;
    border: 1px solid #FFEEE4;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color :#D386A8;
    margin-bottom: 5px;
    padding: 5px;    
    width: 200px;
}

HTML

<div class="blue">
 this is the blue one
</div>

<div class="pink">
    this is the pink one.
</div>