如何用impress.js中的圖像填充屏幕？

我impress.js幻燈片有，我想，以填補屏幕和中心的圖像，下面的代碼：如何用impress.js中的圖像填充屏幕？

<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>

現在它看起來像下面，但我想在第二個幻燈片圖像填滿屏幕（保持寬高比）。

有一些方法通過改變數據規模或相機角度放大？或者將一些CSS技巧足夠？我從默認example template開始。

來源

2016-06-01 M.R.

你可以使用這個CSS的形象，我一定會努力。

/* 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;

來源

2016-06-01 07:10:36

謝謝，但這並不似乎工作。它確實放大了圖像，但它也將圖像偏離中心。 –

你可以請給我你的頁面鏈接。然後，它會很容易理解 –

請訪問此鏈接http://www.devdiz.com/designing/full-screen-responsive-background/可能是它會幫助你 –

這個添加的CSS（X是有問題的步數）：

#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; 
}

，這對HTML：

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

來源

2017-04-28 15:30:32

如何用impress.js中的圖像填充屏幕？

回答

相關問題