Как уменьшать шрифт пропорционально картинке?

Question

[lexstile]

Как заставить вести себя текст поверх картинки (абсолютом) будто бы он является частью этой самой картинки?

<div class="b-container">
		<div class="b-img"><img src="/wp-content/themes/theme1/img/finish.jpg" width="100%"></div>
		<div class="b-text">Текст, который нужно масштабировать относительно родительского блока</div>
	</div>

Можно ли средствами CSS заставить вести себя текст подобным образом, то есть, текст не двигается и не изменяется относительно картинки, но изменяется вместе с ней относительно изменения родительского блока (простой пример - при изменении окна браузера).

Comments

[Rustam Bainazarov]

vw, vh.

[Rustam Bainazarov]

Меняйте размер окна:

[lexstile]

Спасибо, то, что нужно!

Answer 1

[ReActor Дмитрий Вершанский]

1) Для динамичного поведения font-size текста, используйте относительные величины em, rem, vw, vh - а не статичные (фиксированные) px
2) Можете использовать jQuery-плагинчик FitText - это тоже даст результат

Answer 2

[Паша Шворак]

Можете попробовать использовать миксин из этой статьи.