javascript: var dom = {}; dom.slides = document.querySelector('.reveal .slides'); function getRemainingHeight(element, slideElement, height) { height = height || 0; if (element) { var newHeight, oldHeight = element.style.height; // Change the .stretch element height to 0 in order find the height of all // the other elements element.style.height = '0px'; // In Overview mode, the parent (.slide) height is set of 700px. // Restore it temporarily to its natural height. slideElement.style.height = 'auto'; newHeight = height - slideElement.offsetHeight; // Restore the old height, just in case element.style.height = oldHeight + 'px'; // Clear the parent (.slide) height. .removeProperty works in IE9+ slideElement.style.removeProperty('height'); return newHeight; } return height; } function layoutSlideContents(width, height) { // Handle sizing of elements with the 'stretch' class toArray(dom.slides.querySelectorAll('section .stretch')).forEach(function (element) { // Determine how much vertical space we can use var limit = 5; // hard limit var parent = element.parentNode; while (parent.nodeName !== 'SECTION' && limit > 0) { parent = parent.parentNode; limit--; } if (limit === 0) { // unable to find parent, aborting! return; } var remainingHeight = getRemainingHeight(element, parent, height); // Consider the aspect ratio of media elements if (/(img|video)/gi.test(element.nodeName)) { var nw = element.naturalWidth || element.videoWidth, nh = element.naturalHeight || element.videoHeight; var es = Math.min(width / nw, remainingHeight / nh); element.style.width = (nw * es) + 'px'; element.style.height = (nh * es) + 'px'; } else { element.style.width = width + 'px'; element.style.height = remainingHeight + 'px'; } }); } function toArray(o) { return Array.prototype.slice.call(o); } Reveal.addEventListener('slidechanged', function () { layoutSlideContents(#{attr 'revealjs_width', 960}, #{attr 'revealjs_height', 700}) }); Reveal.addEventListener('ready', function () { layoutSlideContents(#{attr 'revealjs_width', 960}, #{attr 'revealjs_height', 700}) }); Reveal.addEventListener('resize', function () { layoutSlideContents(#{attr 'revealjs_width', 960}, #{attr 'revealjs_height', 700}) });