Question

I'm using reveal.js to present screenshots, but the images are not displayed at size 100%.
My bet is that there is a «zoom» trick, as the inspector shows:

<div class="slides" style="-snip- zoom: 0.5001428571428572;">

But that I can't prevent it to occur. Is there a configuration option, a js hack for this?

Here is a slide where I'd like my 800×600 image to display 800×600: http://profgra.org/lycee/presentation_demo.html#/2

Thanks!

Was it helpful?

Solution

Thanks to Cvuorinen, here is the complete answer:

Reveal.initialize({
    ...
    // Bounds for smallest/largest possible scale to apply to content
    minScale: 1,
    maxScale: 1
});

Though it seems difficult to trig this only on some precise slides if they are embedded in the page via Markdown.

OTHER TIPS

Reveal.js scales the whole content so it will fit in any viewport that is used to display it. There are configuration options that allow you to control this effect, documentation is here: https://github.com/hakimel/reveal.js/#presentation-size

I think you could also disable the scaling on a specific slide with a little bit of js. Reveal has great event system that allows you to write your own event handlers and I think you could override the css zoom property when entering a certain slide and restore for the next one, if that would better suit your needs. Haven't done anything like this myself though, just a thought.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top