How to make rubber thumbnails in bootstrap?

Question

css

Good afternoon
, there is such an adaptive layout
prntscr.com/53ci80

blocks are constantly jumping, especially the footer of the block
can be made so that it always shrinks proportionally from the main preview size ...
that is, now the avatar is 50 * 50px, set not in pixels somehow but as a percentage and text... so that if you pull the block, it will also decrease
here the page itself up.lifefilm.ru/newfilms.html

Answer 1

complex example. and this way and that shovels styles - did not come up with a solution ...
but, probably, you can somehow solve it. even without js. only styles. but you need to look in the morning, on a fresh head.

Answer 2

Set the block footer using the .media class in bootstrap. Also give it a fixed height with overflow: hidden. And put an ellipsis at the end of the text, if it does not fit (in css this is enabled by several styles, you need to google "css ellipsis for span")

Answer 3

Look at a simple example:
allvologda.ru
Wrap the output with the thumbnail class. Then, after the image, add a construction with the caption class. Give it position: relative. Next, you can set the height of the caption, you can write a jquery script to automatically calculate the height. You can absolutely position elements inside divs.