如何根据内容大小动态调整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>

我使用了像overflow：hidden这样的css属性，但它对我没用。是否有任何方法可以根据内容大小垂直自动调整图像或div的大小。或者我可以遵循的其他方式与我的要求密切相关。请指导我。

Answer 1

您可以使用CSS属性background-size但it won't be supported in old browsers（主要是IE＆lt; 9，这可能不是问题）：

background-size: cover;

或者

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

或者您可以尝试使用jQuery来处理它。 我建议你看一下：Perfect Full Page Background Image

无论如何，图像会变形，看起来可能不太好。在这些情况下通常做的是将图像分割为3.顶部，中部和底部，因此中间图像可以在Y轴上重复。

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

我的建议：少即是多。让事情变得更轻松浏览其他网站，看看他们如何避免复杂的图像。如果可能的话，只处理CSS，避免请求，加快您的网站速度并为您的网站带来新的简约风格。

Answer 2

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

将其拆分为3 div s。

see here

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

- 顶部

- 中间

- 底部

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

Answer 3

您可以使用“background-size”：

background-size: cover;

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

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

Answer 4

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

您可以选择在为div分配的内容末尾显示剩余内容，并显示左侧内容可能是弹出窗口或您可能需要的内容。

Answer 5

浏览器支持 不如背景大小（据我所知），但这似乎是边框图像的一种情况。

您已经用作背景的图像应该分割得相当好，这样可以让div缩放，而不会导致语音气泡的左右边缘拉伸，就像背景图像刚刚拉伸到的那样配合。

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

Answer 6

background-size：100;

或

background-size：cover;

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

Answer 7

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

的工作fiddle

通过在邮件后添加几个＆lt; br＆gt;，您可以补偿图像中指向气泡的指针。

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％的宽度，但添加了填充和边距。

看看这是否正常......