search

LeaVerou / inspire.js

Lean, hackable, extensible slide deck framework. Previously known as CSSS.
https://inspirejs.org
MIT License
1.73k stars 254 forks source link

proper scaling (images too) #23

Open MattiJarvinen-BA opened 12 years ago

MattiJarvinen-BA commented 12 years ago

Sometimes displays/projectors/whatnot used to give presentations are in very different sizes scaling images and content could be useful.

Example code from some projects I have used.


// when resizing
var denominator = Math.max(
        body.clientWidth / window.innerWidth,
        body.clientHeight / window.innerHeight
);

var transform =  'scale(' + (1 / denominator) + ')';

// scale body  individual slides scale at the same time
// if background is not supposed to scale set it to html
body.style.WebkitTransform = transform;
body.style.MozTransform = transform;
body.style.msTransform = transform;
body.style.OTransform = transform;
body.style.transform = transform;
LeaVerou commented 12 years ago

Yeah, that's a thought I already have. Give up the font scaling code and just use transforms. One potential issue with that is that the aspect ratio is always the same. But I guess that’s not very important. Hmm. I need to think about it a bit more.