我正在研究 Html 和 Css。我正在尝试设计一个类似于网页的图表对话，我需要在其中交替显示消息，就像在移动应用程序中一样，一个在右边，另一个在左边。为此，我使用 div 来包含消息并为其设置背景图像，
这里我面临的问题是，消息的大小可变，这意味着有些可能占用 1 行，而另一些可能占用 5 到 20 行，我们无法估计。Div 背景图像大小仅为 40 像素高度，因此如果我收到超过 3 行的消息，则它会穿过背景图像。这是我的 Div 标记
<div style="background-image:url('some url');padding:10px;margin:2%;word-break:break-word;width:100px;max-width:10px">Here is my content it is variable in size</div>
我使用了诸如溢出：隐藏之类的CSS属性，但这对我没有帮助。有什么方法可以根据内容大小自动调整图像或 div 的大小。或者我可以遵循的其他方式与我的要求密切相关。请指导我。
您可以使用 CSS 属性background-size，但旧浏览器不支持它（主要是 IE<9，这可能不是问题）：
background-size: cover;
或者
background-size: 100% 100%; /*x and y*/
或者你可以尝试使用jQuery来处理它。我建议你看看：完美的整页背景图片
无论如何，图像会失真，可能看起来不太好。在这些情况下，通常所做的是将图像拆分为 3。顶部、中间和底部，因此可以在 Y 轴上重复中间图像。
但是，您仍然会遇到渐变背景的问题，您可能希望将其用作另一个背景图像，或者更确切地说是使用 CSS3...
我的建议：少即是多。让事情变得更容易。看看其他网站，看看他们是如何避免使用复杂图像的。如果可能，只处理 CSS，避免请求，加快您的网站速度，并为您的网站带来新的简约风格。
这是一个可能的解决方案：
只需将其拆分为 3div秒。
它可以将图像分成三个部分：
- 顶部
- 中间
- 底部
但是你真的应该考虑只使用 HTML 和 CSS 来构建聊天气泡，因为它可以提高性能并减少网络请求。
您可以使用“背景大小”：
background-size: cover;
阅读更多： http ://www.w3schools.com/cssref/css3_pr_background-size.asp
不过我不推荐这个。您最好将图像拆分为两个图像并使用两个 div。
朋友，
尝试在元素中添加此属性：
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
因为您设置了 100% 的宽度，但添加了填充和边距。
看看这是否有效...
浏览器支持不如背景大小（据我所知），但这似乎是边框图像的情况。
您已经用作背景的图像应该分割得很好，这将使 div 缩放而不会导致对话气泡的左右边缘以与仅拉伸背景图像以适合的方式相同的方式拉伸。
背景大小：100；
或者
背景尺寸：封面；
是 CSS 解决方案。如果这不符合您的需要，那么您可以使用 jQuery 的、getWidth和getHeight函数。setWidthsetHeight
您可以使用jquery dotdotdot 插件并将 div 的内容缩小到特定的高度和宽度，使其看起来更好..
您可以选择在为 div 分配的内容末尾显示带有链接的剩余内容，并显示剩余内容可能在弹出窗口中或您可能想要的内容中。
您有大量的网站，其中包含仅使用 CSS 制作的聊天气泡。这里有些例子：
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://www.sitepoint.com/pure-css3-speech-bubbles/
http://www.ilikepixels.co.uk/drop/bubbler/
http://html-generator.weebly.com/css-speech-bubble-generator.html
如果您在查看这些内容后有任何疑问，请向我们询问:)
这是一个使用的工作小提琴background-size: 100% 100%;
通过在消息后添加几个 <br>，您可以补偿指向图像中气泡的指针。