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

[AtomicNess123]

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]

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.

I could only solve it with this hotfix at the end of a presentation html, which removes the wrapping <p> 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]

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

[jaegermoritz]

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]

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 https://github.com/hakimel/reveal.js/issues/1099#issuecomment-1551077155, 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]

@jaegermoritz 's comment works.

Example Markdown slide:

## Title

- Some content
- ..

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

---

[ssokolow]

While trying to figure out why this was happening, I figured out that things like max-width and max-height weren't working as expected because reveal.js reimplements part of the CSS sizing model for its scaling model.

Adding this CSS solved my problems:

.reveal img { max-height: calc(var(--slide-height) - (var(--r-block-margin) * 2)); }
.reveal img.top { max-height: calc(var(--slide-height) * 0.5); }
.reveal img.side { max-width: calc(var(--slide-width) * 0.5); }

Prefixing each rule with .reveal is just to give it high enough precedence in the CSS cascade. You could use !important instead if that's your preference but I imagine that would break some kind of embedding.

The .side class is to be used with float: left; or float: right; to get a two-column-ish layout without a bunch of HTML boilerplate having to be added to each slide and without breaking. I still need to restore automatic vertical centering of the text column's content in that use-case though.

EDIT: Note, however, that more work is needed to be compatible with ?view=scroll because this formulation doesn't work with --slide-height: auto so, if you need both that and a consistent layout, you're going to need to do extra work somewhere... be it enhancing that CSS, more verbose HTML, or burning your padding/scaling into your image files and chunks of text using things like <br> and  .

As a freebie, here's how to reconcile auto-animating backgrounds with wanting your non-page-filling background to remain in the same place relative to the content at different screen sizes.

data-background-position="calc(50% - 5em * var(--slide-scale)) 50%"

(I can't remember if it was because calc didn't work for some reason, but I used vh units for data-background-size to complete the process.)

[ssokolow]

OK, here's a fixed version that works with ?view=scroll:

      :root {
        --default-slide-height: 700px;
        --top-img-height: 0.6;
        --side-img-width: 0.5;
      }

      .reveal img { max-height: calc(var(--slide-height) - (var(--r-block-margin) * 2)); }
      .reveal .scroll-page img { max-height: calc(var(--default-slide-height) - (var(--r-block-margin) * 2)); }
      .reveal img.top { max-height: calc(var(--slide-height) * var(--top-img-height)); }
      .reveal .scroll-page img.top { max-height: calc(var(--default-slide-height) * var(--top-img-height)); }
      .reveal img.side { max-width: calc(var(--slide-width) * var(--side-img-width)); }