First, render org to export <img> in a <figure> tag, instead of a <p> tag with the following.

Then add the following code in path-to-the-org-presentation/image-size.js and put #+REVEAL_EXTRA_JS: { src: './image-size.js' } at the top of the org file.

Adapted from Can we add a config to make all images not overflow? · Issue #388 · yjwen/org-reveal.

1. define some special functions

   
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

   /*   https://github.com/yjwen/org-reveal/issues/388 */ function update_image_class() {     var imgs = document.getElementsByTagName("img");     var imgSrcs = [];       for (var i = 0; i < imgs.length; i++) {         imgs[i].className = "stretch";     } }   function getRemainingHeightFigureStretch( element, 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.         element.parentNode.parentNode.parentNode.style.height = 'auto';           newHeight = height - element.parentNode.parentNode.parentNode.offsetHeight;           // Restore the old height, just in case         element.style.height = oldHeight + 'px';           // Clear the parent (.slide) height. .removeProperty works in IE9+         element.parentNode.parentNode.parentNode.style.removeProperty('height');           return newHeight;     }     return height;   } function layoutSlideContentsFigureStretch( width, height ) {       // Handle sizing of elements with the 'stretch' class     toArray( dom.slides.querySelectorAll( 'section > div.figure > p > .stretch' ) ).forEach( function( element ) {           // Determine how much vertical space we can use         var remainingHeight = getRemainingHeightFigureStretch( element, 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';         }       } ); }

2. append the following line in the body of layoutSlideContents():

   
   

   1 2	layoutSlideContentsFigureStretch(width, height);

3. use the usual org-mode image link

   
   

   1 2	[[file:/tmp/super_high.png]]

   NOTES: The above two methods prevent the overflow of images. But stretch css won’t stretch the image to maximum.

org-mode export images to html as figures, not img – Emacs Stack Exchange

insert image link as follows:

NOTES: The images will stretch to maximum with this method.

I use the following format to embed images with stretch class to achieve a full-size view. The problem is that images are NOT encoded inline in base64 format if you want a single file export, also, the images won’t show in a PDF export. It is only good for revealjs presentation in html format. The inliner tool mentioned above is needed to for single-file convertion.