-1

Is there an easy way, or existing library, which will shrink the content of a div if it overflows it's parent? I am envisioning something like Powerpoint / Keynote, where text in the main box shrinks in size automatically, when the content gets to big (so not just re-formatting, but the fonts and pictures get smaller to fit in the div).

I feel this should be simple to do, using CSS 'scale', but I am surprised I can't find someone else who has done it, so I wonder if there is an issue I am not thinking of?

Chris Jefferson
  • 7,225
  • 11
  • 43
  • 66
  • what you're looking for is 'html/css responsivness' Google will help you out – mika Feb 08 '13 at 15:24
  • I don't know if this is what you're thinking of? http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container – Jack Allen Feb 08 '13 at 15:25
  • Thanks Jack, that question gives me some guidance. I'm interested in shrinking everything, not just the font size, but the repeated shrinking in steps is probably the way to go. – Chris Jefferson Feb 08 '13 at 15:28

1 Answers1

1

Something like this? I set up a quick test that calculates the ratio of child to parent boxes and sets an appropriate scale to make the widths match:

var one = $('.one');
var two = $('.two');

if (two.width() > one.width()) {
    two.css({
        'transform': 'scale(' + one.width() / two.width() + ')',
        'transform-origin': '0 0'
    });
}
freejosh
  • 11,263
  • 4
  • 33
  • 47
  • That's the kind of direction I think, but in general what happens divs is that the content spills out of the bottom? – Chris Jefferson Feb 08 '13 at 15:39
  • Just change the `width` to `height` to scale it according to the heights: [demo](http://jsfiddle.net/X4pMT/1/). Though you'll have to then fiddle with the width if you want it to also take up all the horizontal space. – freejosh Feb 08 '13 at 15:41
  • That is getting closer! As you say the horizontal space isn't quite right, but I can see the direction I should be going in! – Chris Jefferson Feb 08 '13 at 15:45
  • This is about what I want ( http://jsfiddle.net/azumanga/3uQzr/ ), this got me in the right direction. – Chris Jefferson Feb 08 '13 at 16:54
  • This was an interesting challenge so I took some more time and came up with a solution: [demo](http://jsfiddle.net/X4pMT/5/). It incrementally adjusts the width of the inner element until its aspect ratio is the same as its parent, then scales based on the height. This one scales both up and down to fit. Also because of rounding the ratios might never match so I kill the loop after 1000 iterations. Though if you modify it and only scale down you won't have to test for equality so it will fix that. – freejosh Feb 08 '13 at 16:55