Как в bootstrap сделать резиновыми thumbnail?

Question

[Рустам Салаватов]

Добрый день
есть такая адаптивная верстка
prntscr.com/53ci80

блоки постоянно прыгают, особенно футер блока
можно сделать чтоб он всегда прапорционально сжимался от основного размера превью...
то есть, сейчас аватарка 50*50px, задать не в пикселях как-то а процентах и текст...чтоб если тянешь за блок, он тоже уменьшался

тут страница сама up.lifefilm.ru/newfilms.html

Answer 1

[Александр Цымбал]

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

Comments

[Рустам Салаватов]

спасибо, так то я забил... и разнес на разные строки название и автора.... так проще чуток стало

[Александр Цымбал]

мм, так даже интереснее. Но чтобы не "ломать" размеры блоков (не добавлять шапку), может быть название виде сделать на полупрозрачной подложке прямо над картинкой?

[Рустам Салаватов]

Александр Цымбал: да можно попробовать.... спасибо

Answer 2

[Виталий Емельянцев]

Задать футер блока через класс .media в бутстрапе. Так же задать ему фиксированную высоту с overflow: hidden. А у текста поставить троеточие на конце, если не помещается (в css это включается несколькими стилями, нужно погуглить "css троеточие у span")

Answer 3

[anikitin35]

Посмотрите простой пример:
allvologda.ru

Оборачиваете вывод классом thumbnail. Затем после изображения добавляете конструкцию с классом caption. Задаете ему position: relative. Далее можете выставить высоту caption, можете написать jquery-скрипт для автоматического расчета высоты. Можете делать абсолютное позиционирование элементов внутри div.