Large images dangling off screen #1099

tsdmgz · 2015-01-11T18:53:59Z

openSUSE 13.2 x86_64 3.16.7-7-desktop
tested on Firefox 34.0.5, Chromium 39.0.2171.65
working on Konqueror 4.14.3

Large-ish images are rendered with bottom part off screen. Current resolution is 1600x900. Portrait orientations seem to work properly.

This is the image used

Screenshot in FF 34

Same slide in Konqueror (WebKit based?)

tsdmgz · 2015-01-19T12:57:43Z

After a bit of fiddling, it apparently has something to do with max-height, but I can't exactly figure out what it is.
Adding style="height:65%" or some other size to <img> seems to work around, but it has to be added for every <img> tag. Interestingly enough, portrait resolutions seem to display correctly. Looks like tall images are mainly affected.

Mark-L6n · 2015-03-04T20:24:02Z

I fixed this with class="stretch" (see https://github.com/hakimel/reveal.js/#user-content-stretching-elements )
By the way, I found this did not work if in Reveal.initialize you have width or height set to a percentage, as in:
width: "80%",
height: "80%",

tsdmgz · 2015-03-05T15:23:31Z

Mark-L6n · 2015-03-10T02:51:20Z

The images didn't fill the screen correctly (can't remember if they were too large or too small).

tsdmgz · 2015-03-10T06:56:35Z

sedrubal · 2015-11-24T00:51:02Z

I could resolve this issue by adding this css:

.reveal section.img_container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
}
.reveal section img {
        display: block;
        margin: auto;
        height: auto;
        max-height: 100%;
        width: auto;
        max-width: 100%;
}

and by adding class="img_container" to all sections containing only <img>...

I don't know if this is a good solution...

vanquang9387 · 2016-04-20T03:33:17Z

class="stretch" seems to only work at first section in a group of vertical sections.

adalmieres · 2016-11-02T15:40:56Z

I hit the same problem with a large square image, with or without class="stretch". The image is placed in a section just after a vertical of tree sections.
It seems that the horizontal visibility is prevalent to the vertical visibility.

odkr · 2018-05-11T15:20:00Z

I had the same problem and could solve it by:

.reveal.reveal img
{
    border: none;
    box-shadow: none;
    max-height: calc(66vh);
    max-width: calc(66vw);
}

Jmuccigr · 2018-05-19T16:23:53Z

Here's what I ended up with in my scss file (see #2127). It creates a format in which figures are expanded to full screen and their captions are invisible until hovered over. I use it for classroom lectures in which I frequently want to show just an image:

// Trying to get full-screen images

.reveal figure, .reveal section {
    height:  inherit;
}

//1. Make canvas bigger. See https://github.com/hakimel/reveal.js/issues/638
.reveal .slides {
	width: 100%;
	height: 100%;
	top: 0;
	margin-top: 0;
}

//2. Remove padding so images reach top & bottom edges
.reveal .slides section,
.reveal .slides section > section {
  padding: 0;
}

.reveal section img {
  border: none;
  margin: 0;
}

.reveal img, .reveal video, .reveal iframe {
  max-height: 100%;
  height: 100%;
}

//3. Wide image that always fits
.reveal figure img {
  box-shadow: none;
  max-width: 100%;
  object-fit: contain;
}

//4. Hide caption. Show on top of image via hover.
.reveal figcaption {
	display: block;
	position: absolute;
	margin: auto;
	width: 96%;
	left: 0;
	text-align: center;
	bottom: 1em;
	height: auto;
	background-color: white;
	color: black;
	font-size: smaller;
	padding-left: 2%;
	padding-right: 2%;
	opacity: 0;
}

.reveal figcaption:hover {
  opacity: .9;
}

davidjb · 2018-08-19T09:41:57Z

If using Markdown to render images, even adding the CSS like so:

![Example](img/example.png) <!-- .element class="stretch" -->

isn't enough because when rendered, the Markdown renderer adds a  tag around the <img> which presents the stretch code from applying. The current codebase is looking for just section > .stretch, which means this won't work. I worked around the issue by editing the reveal.js source so that it applies like so:

toArray( dom.slides.querySelectorAll( 'section > .stretch, section > p > .stretch' ) ).forEach( function( element ) {

Getting rid of the surrounding  tag would be better, but I haven't seen if that's possible.

codecounselor · 2018-11-25T00:16:03Z

I ran into the same problem @davidjb describes, and I solved it by just putting HTML in my markdown. It's gross, but appears to be working.

## Heading
<p class="stretch"><img src="https://someurl"></p>

tribbloid · 2019-02-13T01:26:31Z

also affects me.

For jupyter nbconvert everything fails, the image generated by matplotlib cannot use any styling

AtomicNess123 · 2021-06-15T18:21:14Z

Here's what I ended up with in my scss file (see #2127). It creates a format in which figures are expanded to full screen and their captions are invisible until hovered over. I use it for classroom lectures in which I frequently want to show just an image:

// Trying to get full-screen images

.reveal figure, .reveal section {
    height:  inherit;
}

//1. Make canvas bigger. See https://github.com/hakimel/reveal.js/issues/638
.reveal .slides {
	width: 100%;
	height: 100%;
	top: 0;
	margin-top: 0;
}

//2. Remove padding so images reach top & bottom edges
.reveal .slides section,
.reveal .slides section > section {
  padding: 0;
}

.reveal section img {
  border: none;
  margin: 0;
}

.reveal img, .reveal video, .reveal iframe {
  max-height: 100%;
  height: 100%;
}

//3. Wide image that always fits
.reveal figure img {
  box-shadow: none;
  max-width: 100%;
  object-fit: contain;
}

//4. Hide caption. Show on top of image via hover.
.reveal figcaption {
	display: block;
	position: absolute;
	margin: auto;
	width: 96%;
	left: 0;
	text-align: center;
	bottom: 1em;
	height: auto;
	background-color: white;
	color: black;
	font-size: smaller;
	padding-left: 2%;
	padding-right: 2%;
	opacity: 0;
}

.reveal figcaption:hover {
  opacity: .9;
}

I'm a newbie in reveal.js. Where exactly shall I save this code? I am using Jupyter Notebook to create slides, but the images are out of bound.

tillmariajuergens · 2021-09-15T11:39:41Z

If using Markdown to render images, even adding the CSS like so:
![Example](img/example.png) 
isn't enough because when rendered, the Markdown renderer adds a  tag around the <img> which presents the stretch code from applying. The current codebase is looking for just section > .stretch, which means this won't work. I worked around the issue by editing the reveal.js source so that it applies like so:
toArray( dom.slides.querySelectorAll( 'section > .stretch, section > p > .stretch' ) ).forEach( function( element ) {
Getting rid of the surrounding  tag would be better, but I haven't seen if that's possible.

I could only solve it with this hotfix at the end of a presentation html, which removes the wrapping  tag

<script>
	const allStretchedImages = document.getElementsByClassName("r-stretch"); // or "stretch"
	allStretchedImages.forEach( function( image ) {
		parent = image.parentNode;
		if ( parent.nodeName && parent.nodeName.toLowerCase() === 'p' ) {
			var fragment = document.createDocumentFragment();
			while( parent.firstChild ) {
				fragment.appendChild( parent.firstChild );
			}
			parent.parentNode.replaceChild( fragment, parent );
		}
	} );
</script>

Would be helpful, if it would be part of reveal.js, or am I wrong?

prologic · 2023-05-09T00:37:56Z

Is there a proper fix for this that makes images fit, even for Markdown image links?

jaegermoritz · 2023-05-17T09:40:45Z

I don't know it sth. changed in the meantime, but for me the following solution does the trick using a separate .md-file:

![book in library](assets/introduction/image1.jpg)

<!-- .element: class="r-stretch" -->

Some more descriptive text below the image

I've put the HTML comment section below the markdown link. Then the auto adjustment of Stretch applies to the p-tag, which is always wrapped around. As the image within that p-tag is responsive by default it's getting resized. And finally my text below the image is visible ;)

GlenRosales · 2023-05-20T05:11:33Z

On Wed, May 17, 2023 at 4:41 AM Moritz ***@***.***> wrote: Came across this thread facing the same problem. I don't know it sth. changed in the meantime, but for me the following solution does the trick in a separate .md-file: ` [image: book in library] <http://assets/introduction/image1.jpg> Some more descriptive text below the image ` I've put the HTML comment section below the markdown link. Then the auto adjustment of *Stretch* applies to the p-tag, which is always wrapped around. As the image within that p-tag is responsive by default it's getting resized. And finally my text below the image is visible ;) — Reply to this email directly, view it on GitHub <#1099 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHYCJ76CILN6SHS6E36KNY3XGSMOLANCNFSM4A2DVKWA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Sent from Gmail Mobile

prologic · 2023-05-20T23:07:25Z

@jaegermoritz 's comment works.

Example Markdown slide:

## Title

- Some content
- ..

![](./images/image.png)
<!-- .element: class="r-stretch" -->

---

tzickel mentioned this issue Mar 14, 2018

Using external markdown I have some syntax issues I can't figure out #2123

Open

leoek mentioned this issue Nov 13, 2018

Use 80vh instead of 95% as max-height of images? #2261

Open

zeigerpuppy mentioned this issue Mar 24, 2021

improve handling of image size in slides hedgedoc/react-client#1115

Closed

geyuqiu added a commit to geyuqiu/presentations that referenced this issue Sep 12, 2021

fix large image: hakimel/reveal.js#1099 (comment)

e6bfe80

Large images dangling off screen #1099

Large images dangling off screen #1099

tsdmgz commented Jan 11, 2015

tsdmgz commented Jan 19, 2015

Mark-L6n commented Mar 4, 2015

tsdmgz commented Mar 5, 2015 via email

Mark-L6n commented Mar 10, 2015

tsdmgz commented Mar 10, 2015 via email

sedrubal commented Nov 24, 2015

vanquang9387 commented Apr 20, 2016

adalmieres commented Nov 2, 2016

odkr commented May 11, 2018

Jmuccigr commented May 19, 2018

davidjb commented Aug 19, 2018 •

edited

codecounselor commented Nov 25, 2018 •

edited

tribbloid commented Feb 13, 2019 •

edited

AtomicNess123 commented Jun 15, 2021

tillmariajuergens commented Sep 15, 2021

prologic commented May 9, 2023

jaegermoritz commented May 17, 2023 •

edited

GlenRosales commented May 20, 2023 via email

prologic commented May 20, 2023

Large images dangling off screen #1099

Large images dangling off screen #1099

Comments

tsdmgz commented Jan 11, 2015

tsdmgz commented Jan 19, 2015

Mark-L6n commented Mar 4, 2015

tsdmgz commented Mar 5, 2015 via email

Mark-L6n commented Mar 10, 2015

tsdmgz commented Mar 10, 2015 via email

sedrubal commented Nov 24, 2015

vanquang9387 commented Apr 20, 2016

adalmieres commented Nov 2, 2016

odkr commented May 11, 2018

Jmuccigr commented May 19, 2018

davidjb commented Aug 19, 2018 • edited

codecounselor commented Nov 25, 2018 • edited

tribbloid commented Feb 13, 2019 • edited

AtomicNess123 commented Jun 15, 2021

tillmariajuergens commented Sep 15, 2021

prologic commented May 9, 2023

jaegermoritz commented May 17, 2023 • edited

GlenRosales commented May 20, 2023 via email

prologic commented May 20, 2023

davidjb commented Aug 19, 2018 •

edited

codecounselor commented Nov 25, 2018 •

edited

tribbloid commented Feb 13, 2019 •

edited

jaegermoritz commented May 17, 2023 •

edited