How can i make some text font-size scale to the div in such way the proportion text-size/divsize stays the same? In other words, when I resize the div, I need the text to resize with it like if it's only an image scaling.
How can I achieve this? preferable css only.
This can be a webkit only solution. I don't need it to be compatible with the rest.
You can't do this properly without relying on Javascript.
If you want to use a CSS-only solution whether it is even close to possible depends on how the div is being resized - if it's based on viewport then you can achieve this (albeit in a very hacky and work-intensive, difficult to maintain fashion) with CSS media queries like below, if it's done some other way you probably have to resort to JS for any solution.
div { width: 50%; font-size: 72px; }
@media only screen and (max-width: 1023px) { div { font-size: 36px; } }
@media only screen and (max-width: 767px) { div { font-size: 20px; } }
And so on. Obviously this is an approximate/imperfect solution at best and that is assuming your div is sized relative to the window (which makes @media queries relevant). Otherwise you probably have to use JavaScript.
I recently stumbled across FitText which is a JS plugin that does exactly what you're asking. Another option is BigText. Both require jQuery.
As answered in this question, this jsfiddle may be a good example to look at.
For a CSS-only solution, at least according to this question, it would appear that you could use vw units to do this, like so:
div {
font-size: 1.5vw;
}
However, the question I linked to (and this article) say that it does not work flawlessly in some browsers.
Well why not transform the element with transform: scale?
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
