2

I'm looking for an idea how to make a responsive text self-scaling based on width and height of div inside which it is. For example in this fiddle: http://jsfiddle.net/s3wabLkL/1/ the text is in the middle of the result div, but if you make the div smaller by resizing window, the text will stay as big as it was. I would like to make it smaller and stay in the same proportions to the parent div and whole window. Is it possible in CSS/JS?

Sample code:

<div class="text_block">
    <center>sample text in sample block</center>
</div>
<style>
.text_block {
    color: white;
    background-color: red;
    width: 80%;
    height: 30%;
    font-size: 2rem;
}
</style>

Edit: I'm looking for a way to scale font-size by both viewport hight and width in the same time, so it's not duplcation of another question. If i use vmin, vh or vw it won't be in the same propotions after resizing the viewport in different ways.

hon2a
  • 7,006
  • 5
  • 41
  • 55
Luke
  • 2,350
  • 6
  • 26
  • 41

0 Answers0