Reveal.js: Large images dangling off screen

[tsdmgz]

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]

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]

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]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

It does work. Thank you!

But what do you mean that it doesn't work when w/h is set as a percentage?
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2

iQIcBAEBAgAGBQJU+HTqAAoJEFwU9ymJ941myrQP/0E7hLjaebyiPsxFljkQDqvL
TtpEbXnL95utl/P7ep2Dj2BSSsjKuhM6MrCoygR3SR4wwtPBntsiWFbbZ19GDAFC
W0E6NB05rV6LyOtz5twSQgTcGh5HzKc5zmGr0k2mLH9euvpRZ9TgWiCeoyEhX91l
c0x0KbK326rmoCFzNSXLn0wFrd2dHmVMer3uMzXbtFi+zcXmxZSlauVrJ7lmgevw
ByN38zeA95ysXI8t9bYmwEoIn9Rlzfvc9kZ0rvdXOlMQNZ5WoFF5aewZUV6P5t35
KAG9g7+N32tdsV2Di/fHXB5VWRBC+ccdThUIwqwhnHBJlI0FQZcOTXWWqRClh8h5
Wt8lRCMQPjtZ/Fh0Wv6I6nZ0HHs/asfQfatxJ60fG9LmiuFIV/3VDt1XBaz7Rx2D
qkPrlxKX9lVVTJGQfySAjT86W4LO6fDRdHXrRO3XllZqjtUW4WDav7GlntFOztcU
PS4P8myuCQKlCUgSw1XOXRJfL3ReTA/vdSJmUEbDHgMKZbPQpgztZt888Rg0wgcy
kTomFllW+KvlHzth1eHeMSe1IyG0+nE4LTXTDpCM1BaI+OwecupUxbYVisfJQ+J2
wK/8NxIE6tBARcBzlCpFiceSswdUnNdav9DEuAxH0F5PhWQYCd4dsN4Ir8S+TYHs
Y5tAYmoaPRN9l+hUGrtO
=JS1C
-----END PGP SIGNATURE-----

[Mark-L6n]

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

[tsdmgz]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

It makes sense now. Adding class="stretch" makes image dimensions change on the fly.
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2

iQIcBAEBAgAGBQJU/pWRAAoJEFwU9ymJ941mclUP/izK1nwW5b1tfmtEu1qzRPu4
TzkxZVauGTGpGriOBBIMqUTKR2i54Rh4xWoLjYE8gV/Y16kF1l/Fyb3tFDhKj+rn
7D/SnLnxZiwQSJQpePZEr+CTo/ZSoc2hnXmAr05ZubO1fxyFyd3fT8EZOYFDtmdX
li90n+++X5Mtp7lkzR5sIS1j4SB44ewj1FYEiYJFN9POGqD7ua3ysridJZzr5vMx
ZuyVxWAjX0TJD1a3pDHiCqX4spymEvonZEOfAfeYuZj6G/pOQTCQCstuMA0rgyr7
P73Kl4HASqRd3SXlNtahVfQ2K9dSca90Hl/kik3dR4+xuBwf4hj62UaiUB2J4a/a
0YqURV+/NmNjFHcDaOp+mAPIUC4NZOf9ibaHcev06nRqkljXNcXnSMoEAEBTXs65
PSjZkwZad0gKnUS8PtK0OHqlKhypnOCiSOZBl/ErcmqhSOR2wor1o14I2agk3neI
WYiDN1qYjKbGgTe8UFL2TsnjU2KRA4Zks9N9NFpwV2c5UjrmfcLcnrfdFwNsgEnj
R++PGs0O5MXRuAx8lVIf7QAhI2evrZaOj4nI5KeXx/5oXgJMTf40wMAd5McJCC9u
X2UrmdJDXvqAtA8xXN0mdn60bmQkv0YSzbLHvW3zNvncYg0NNNM4tthT/HMDFtSb
F4a2EfLHJLgrhiEov5JR
=LlxP
-----END PGP SIGNATURE-----

[sedrubal]

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]

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

[adalmieres]

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]

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]

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]

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 <p> 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 <p> tag would be better, but I haven't seen if that's possible.

[codecounselor]

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]

also affects me.

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