Как динамически настроить или изменить размер фонового изображения div в зависимости от размера контента

Вот возможное решение:

Просто разделите его на 3 div s.

глянь сюда

Он работает с разбиением изображения на три части:

- Вверх

- средний

- Нижняя часть

Но вы должны действительно подумать о создании чатов с использованием только HTML и CSS, поскольку это повышает производительность и уменьшает количество сетевых запросов.

Вы можете использовать background-size свойства CSS, но он не будет поддерживаться в старых браузерах (в основном IE <9, что может и не быть проблемой):

background-size: cover;

Или

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

Или вы можете попробовать использовать jQuery для решения этой проблемы. Я бы рекомендовал вам взглянуть на: Perfect Full Page Background Image

Во всяком случае, изображение будет искажено и может выглядеть не очень хорошо. То, что обычно делается в этих случаях, - это разбиение изображения на 3. Верх, миддел и дно, поэтому среднее изображение можно повторить по оси Y.

Но у вас все еще будут проблемы с дипломированным фоном, который вы, возможно, захотите использовать в качестве другого фонового изображения или, скорее, с помощью CSS3...

Мой совет: меньше. Сделать вещи проще. Осмотритесь на других сайтах и посмотрите, как они стараются избегать сложных изображений. Если возможно, используйте только CSS, избегайте запросов, ускоряйте свой сайт и привносите новый минималистский стиль на свой сайт.

У вас есть множество сайтов с чатами, созданных только с помощью 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":

background-size: cover;

Подробнее: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Но я не рекомендую этого. Вам лучше разделить изображение на два изображения и использовать два div.

background-size: 100;

или

размер фона: обложка;

являются решениями CSS. Если это не соответствует вашим потребностям, вы можете использовать функции jQuery getWidth, getHeight, setWidth и setHeight.

Друг,

Попробуйте добавить это свойство в элемент:

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

Поскольку вы устанавливаете 100% ширины, но добавляете к paddings и полям.

Посмотрите, работает ли это...

Вы можете использовать плагин jquery dotdotdot и сжимать содержимое div до определенной высоты и ширины, чтобы он выглядел приятнее..

У вас есть возможность показать оставшееся содержимое со ссылкой в конце вашего контента, выделенного для div, и показать, что содержимое слева над содержимым может быть всплывающим или что-то, что вам может понадобиться.

Поддержка браузера не так хороша, как размер фона (насколько мне известно), но это похоже на случай для border-image.

Изображение, которое вы уже используете в качестве фона, должно делиться довольно хорошо, и это позволит шкале div, не заставляя левый и правый края речевого пузыря растягиваться так же, как если бы фоновое изображение просто растягивалось, чтобы соответствовать.

Дополнительная информация: http://css-tricks.com/understanding-border-image/

Здесь рабочая скрипка с использованием background-size: 100% 100%;

Добавив пару сообщений после вашего сообщения, вы можете скомпенсировать указатель на пузырь на вашем изображении.