Suppose there is some content (with divas, pictures, dough, frames, etc.). Is there a way in which it was possible to place it in a DIV block and, when specifying a particular style for this block, scale its content proportionally in width and height (it should all look like we are scaling a bitmap)?

  • Well, as an example, the style can change the height / length of the parent unit. Internal elements must be dependent on this value and will change accordingly. However, for the scaling effect (i.e., a proportional change in the coefficient from 100% of the size), as for me without js, it is very difficult to perform (well, except for the transformation inside). With the help of variables and the css3 function, a lot of things can be done, but also a lot will have to be taken into account and more difficult to maintain. - alexoander
  • @alexoander, the parent block is not in question, I meant to change the scale of the embedded content inside the block, I am not very strong in css, it just may have some kind of hack, or there any webkits and so on. - perfect
  • I meant by the parent unit the one in which there will be all "scalable elements". There is no 100% simple solution (i.e. there is no magic hack that will turn the DOM into a picture for the scaling time and back =)) - alexoander
  • @alexoander I asked to make a picture from html elements? in my opinion not ... - perfect
  • Forget the picture, it's just an example. Scaling is changing the size of something relative to 100% of their size. In essence, this is a mathematical problem, the essence of which is reduced to a change in the values ​​of elements relative to their 100%. That's just in the css for this you have to pretty sweat (especially if there are a lot of elements). In JS, this is a typical task for calculations, but it can turn into a rather heavy execution speed (again, because of the number of elements). - alexoander

1 answer 1

Yes. Set this block and its contents to everything in rem instead of px . Then change the font-size value for the html tag.

The units of measure for rem are root em, that is, you specify all sizes relative to the font-size html . This way it is very easy to program. If for html font-size: 16px (usually this is the default value), then 1rem = 16px , 0.5rem = 16px , etc. That is, you simply divide the pixel values ​​by 16 . However, these units are widely supported by browsers (IE9 +).

Example:

 html { font-size: 16px; } .resizable { width: 10rem; height: 5rem; border: 0.25rem solid orange; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="$(`html`).css('font-size', parseInt($(`html`).css('font-size')) - 1)"> - </button> <button onclick="$(`html`).css('font-size', parseInt($(`html`).css('font-size')) + 1)"> + </button> <div class="resizable"> Это масштабируемый текст </div>

  • seems to be true. and thanks for the bonus) did not know that styles can be applied to the html tag. - perfect