Auto-resize elements based on container size without using scale

Question

Example:

Just having a problem with the computation to auto adjust width of element-image and font size of the element-text based on the container's width. It's like,

$('.element-image').width() = $('.container').width() - $('.element-image').width();
$('.element-text').css('font-size') = $('.container').width() - $('.element-text').css('font-size');
<div class="container">
    <img class="element-image" src="sample.jpg" />
    <span class="element-text">Sample Text</span>
</div>

something like that but I can't get the logic. Can someone help? Note that this is for my web app, it's like an ad or graphic builder.

Here's the sample app: https://drive.google.com/file/d/1dnsRg6TjLqUx6IzgLwOYq5uNJrrx7dUv/view?usp=drivesdk

wow, are you aware about what you are writing using jQuery ? — Temani Afif, Apr 03 '18 at 10:43
Question makes no sense. Why would anything need adjusting? Is it a dynamic page where you load things that have unknown properties, like size? Also, you don't assign values the way you have the code above. The left hand side is what you assign the right hand side to, so `5 - 3 = x` is incorrect. You would need `x = 5 - 3`. — Reinstate Monica Cellio, Apr 03 '18 at 10:51
Some people here is not helping. It's just a sample code. I need that code for an ad builder online. You don't need to correct my code, i know it's wrong, i just expressed it in a fast way, i just need the logic. Stop saying, the code is wrong or makes no sense. Just help if you can because it's a very challenging logic. — Franz Lopez, Apr 03 '18 at 13:52
Possible duplicate of [Auto-size dynamic text to fill fixed size container](https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) — Daniel Beck, Apr 03 '18 at 15:20

score 0 · Answer 1 · answered Apr 03 '18 at 10:39

0

You dont have to do it with jquery. You can use CSS width:100%; or any percentage for that and it will generate a width accorind to its parent width.

Check this DEMO to understand.

answered Apr 03 '18 at 10:39

Güney Saramalı

791
1
10
19

You don't understand man, its for an ad builder and not for the whole page. Width 100% using css only works with the images or div. How bout the text elements then? – Franz Lopez Apr 03 '18 at 13:54
You can use percentage for font-size as well. – Güney Saramalı Apr 03 '18 at 13:59
Doesn't work either because I need the actual font size for the WYSIWYG, you can visit canva.com to see what i mean. – Franz Lopez Apr 03 '18 at 14:05

Daniel Beck · Accepted Answer · 2018-04-03T15:20:15.063

Scaling images is trivial, just use percentage widths.

Scaling text is harder. You can use viewport units to scale the text based on the window size:

.element-text {
  font-size: 10vw
}

  <span class="element-text">Sample Text</span>
  <div>Unscaled text (put this snippet in "fullscreen" mode and change the window size to see the effect)</div>

...but if you need text to scale to exact container sizes, you'll need to resort to javascript. The following is a (kind of dumb) method for setting the font-size to match the container size -- you wouldn't use short-interval polling in real life, and would probably do something smarter than simply incrementing / decrementing the font-size at each step, but this should suffice for demonstrating the technique:

window.setInterval(function() { // In real life you'd likely use the window resize event

  var ewidth = $('.element-text').width();
  var cwidth = $('.container').width();
  var fontsize = parseInt($('.element-text').css("font-size"));
  // change font size if the text block doesn't match the container width
  if (ewidth > cwidth - 20) { // leave a little extra space to prevent jitter
    $('.element-text').css("font-size", --fontsize);
  } else if (ewidth < cwidth ) {
    $('.element-text').css("font-size", ++fontsize);
  }
}, 1);

.container {
  resize: both;
  overflow: hidden;
  border: 1px solid;
  width: 20px;
}

.element-image {
  width: 100%
}

.element-text {
  white-space: nowrap
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Resize me:
<div class="container">
  <span class="element-text">Sample Text</span>
  <img class="element-image" src="http://placehold.it/200x200" />

</div>

This jQuery plugin uses much the same technique. In its source code is the following comment block:

        // I understand this is not optimized and we should
        // consider implementing something akin to
        // Daniel Hoffmann's answer here:
        //
        //     http://stackoverflow.com/a/17433451/1094964
        //

...which is maybe the most roundabout way I've ever discovered a potential question duplicate. (Clearly I need to pay more attention to the "related questions" list, because there it is right at the top of it...)

Nice! Actually, i have found the solution using a plugin, https://github.com/jquery-textfill/jquery-textfill but u answered too specifically correct. Thanks! — Franz Lopez, Apr 03 '18 at 15:10

score 0 · Answer 3 · answered Apr 03 '18 at 15:33

I didnt really got what do you need but im fixing your jquery

var contwidth = $('.container').width();
var imgwidth = $('.element-image').width();
$('.element-image').width(contwidth - imgwidth);
$('.element-text').css('font-size',contwidth - imgwidth);

<div class="container">
    <img class="element-image" src="sample.jpg" />
    <span class="element-text">Sample Text</span>
</div>

btw as you are changing the width of the image, what is the logic of calculating container width - image width? This will be an error because as you trying to get the width of image the other function changes it. never ending cycle.

Auto-resize elements based on container size without using scale

3 Answers3