如何根据内容大小动态调整div的背景图像或调整其大小

Question

我正在研究HTML和CSS。 我正在尝试设计一种类似于网页的图表对话，在该对话中，我需要显示消息，或者像在移动应用程序中一样，一个接一个地出现在另一个左边。 为此，我正在使用div包含消息，并为此设置了背景图片，

在这里，我面临的问题是，消息的大小是可变的，这意味着某些消息可能占用1行，而另一些消息可能占用5至20行，我们无法估计它。 Div的背景图片大小仅为40px高度，因此，如果我收到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属性，如：overflow：hidden，但这对我没有帮助。 有什么方法可以使图像或div自动根据内容大小自动调整大小。 或者我可以遵循的其他方式与我的要求密切相关。 请指导我。

Answer 1

您可以利用CSS属性background-size但是在旧的浏览器中将不支持它 （主要是IE <9，这可能不是问题）：

background-size: cover;

要么

background-size: 100% 100%;  /*x and y*/

或者，您可以尝试使用jQuery处理它。 我建议您看一下： 完美的整页背景图片

无论如何，图像会失真，看起来可能不太好。 在这些情况下，通常要做的是将图像分为3个。上，中，下三个图像，以便可以在Y轴上重复中间图像。

但是，您仍然会遇到渐变背景的问题，您可能希望将其用作另一个背景图像或CSS3 ...

我的建议：少即是多。 使事情变得容易。 环顾其他网站，看看他们如何避免复杂的图像。 如果可能，请仅处理CSS，避免提出请求，加快您的网站速度，并将新的简约风格引入您的网站。

Answer 2

这是一个可能的解决方案：

只需将其分成3 div s。

看这里

它可以将图像分为三个部分：

- 最佳

-中

-底部

但是您应该真正考虑仅通过使用HTML和CSS来构建聊天气泡，因为它可以提高性能并减少网络请求。

Answer 3

您可以使用“ background-size”：

background-size: cover;

了解更多： http : //www.w3schools.com/cssref/css3_pr_background-size.asp

但是我不建议这样做。 您最好将图像分为两个图像，并使用两个div。

Answer 4

您可以使用jquery dotdotdot插件并将div的内容缩小到特定的高度和宽度，以使其看起来更好。

您可以选择显示剩余的内容，并在分配给div的内容结尾处带有一个链接，并显示剩余的内容可能在弹出窗口中或您想要的内容。

Answer 5

浏览器支持是没有背景的大小（据我所知） 一样好，但是这似乎是边界图像的情况。

您已经用作背景的图像应该很好地分割，这将使div缩放而不会导致气泡的左右边缘以与仅拉伸背景图像相同的方式进行拉伸。

更多信息： http : //css-tricks.com/understanding-border-image/

Answer 6

背景大小：100；

要么

背景尺寸：封面；

是CSS解决方案。 如果这不符合您的需求，则可以使用jQuery的getWidth ， getHeight ， setWidth和setHeight函数。

Answer 7

这是一个使用background-size: 100% 100%; 小提琴 background-size: 100% 100%;

通过在消息后添加几个<br>，可以补偿指向图像中气泡的指针。

Answer 8

您有大量带有仅使用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

如果您在查看后有任何疑问，请向我们询问:)

Answer 9

朋友，

尝试在元素中添加此属性：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

因为您将宽度设置为100％，但是增加了填充和边距。

看看这是否有效...