How to fill the screen with image in impress.js?

My impress.js slides have images that I would like to fill the screen and center, here's the code:

<div id="impress">
    <div class="step" data-x="-10000" data-y="100" data-z="0"  data-scale="1">
        Introduction
    </div>
    <div class="step" data-x="-10000" data-y="-1100" data-z="1000" data-scale="1">
        <img src="images/Wallpaper-Abstract-Fractal-Flowers-Lilies.jpg" >
    </div>
</div>

Right now it looks like below, but I'd like the image in the second slide to fill up the screen (maintaining aspect ratio).

Is there some way to zoom in by changing the data-scale or the camera angle? Or will some css tricks suffice? I started with the default example template.


You can use this CSS for image, I will work definitely.

/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;

Setting impress.js to fill up the entire screen? � Issue #493 � impress , I noticed that all examples included and all demos of impress.js I've seen so far fill up only 80% of the screen size. Is it possible to make this� Advanced Impress.js demo by @bartaz. Again, the html and css source is well commented. More examples and demos: examples/ in this repository; on the impress.js wiki; Check out Impressionist: a 3D GUI to create impress.js presentations


Add this to the css (X is the number of the step in question):

#step-X html,body{
    margin:0;
    height:100%;
    overflow:hidden;
}
#step-X img{
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
}

and this to the html:

<div class="step" data-rel-x="2000" data-rel-y="0">
<img src="path/to/image.png" alt="">
</div>

How to make the image fit the size of parent <div> with "step" class , When I tried to define following css based on impress-demo.css, it still shows part of my Actually the view by default scales so that my image fills the screen. With Impress.js, my texts and my images look blurry. See the next screenshot where CSS is disabled but Impress.js is enabled : And now see the next screenshot where Impress.js and CSS are disabled :


I'm personnaly using the great object-fit: cover/contain; properties, and I set the size of the picture to the size of the viewport, and it's enough. Note that it also works with videos if you want.

.fitImage {
    width:  100vw;
    height: 100vh;
    margin: 0;
    padding:0;
    background: black;
}


.fitImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
    <div class="step fitImage" data-x="0" data-y="0" data-scale="2">
        <img src="picture.png" />
    </div>

Classic Slides with impress.js, Sub-bullet 2. A blockquote & image. Mother Teresa holding a newborn baby. Spread love everywhere you go. Let no one� **** Watch the video in full screen at 720 p for better quality **** Using impress to create cool presentation, grab the source code from https://github.com/eMahtab


This answer is pretty late. But it may help some googlers (all of us) later :)

The trick is to combine the attribute data-scale=2 (or a bigger number than 2) on the slide, thus we have <div class="step" data-scale=2></div>

Then we fill this slide with an image and increase the height and width attributes of the image. Finally we have something like this :

<div class="step" data-scale=2> <img src="src/of/image.jpeg" style="position: absolute; left: 0px; top: 0px; z-index: -1; width: 9000px; height: 1000px"> </div>

We can combine data-scale and dimensions (height,width) of the image until we are satisfied with the quality of the image.

Please refer to this link for more details : Hinco (impress.js contributor) Blog

Markdown in impress.js, js HTML5+CSS3+JavaScript! Styles. You can use italics & bold and code. A blockquote & image. A common and IMO cool way to create impress.js presentations, is to use some large background image for the entire presentation, then layout each slide over it. One of my first impress.js presentation was Selling Open Source 101 for Oscon 101. The presentation is inside a picture of a woman selling all kinds of stuff in a bazaar.


Making presentations — Hovercraft! documentation, Hence impress.js uses the terms “slide” and “step” as meaning the same Any image file referenced in the presentation by a relative path will be copied :css- screen,projection: css/presentation.css :css-print: css/print.css Hovercraft! will scale the path so that all the slides that need to fit into the path will fit into the path . Using impress.js for presentations allows speakers to wow their audiences with presentations that slide, rotate, and zoom in three dimensions. Being based on standard web technologies (HTML, CSS, and JavaScript) means that impress.js does not lock users into using a particular application or web-based service to create presentations.


Impress Recommended Image Size, What resolution will guarantee that the image will display clean and crisp? The images need to very nearly fill the screen. In Page Setup I have� <script> /* Get the element you want displayed in fullscreen mode (a video in this example): */ var elem = document.getElementById("myvideo"); /* When the openFullscreen() function is executed, open the video in fullscreen.


impress.js, Incompatibility between reveal/impress js and sagemathcell My impress.js slides have images that I would like to fill the screen and center, here's the code: � impress.js is a JavaScript library to help you create an impressive online presentation. This video will walk through impress.js features and provide introduction how to create your slide Full