調整大小幻燈片以填充屏幕

我正在建立一個自動幻燈片的攝影網站。調整大小幻燈片以填充屏幕

我試圖讓幻燈片大小調整到適合瀏覽器，以便它填滿屏幕，在之上或之下不留空格。如果屏幕的圖像比例錯誤（如果用戶使用iphone等設備，圖像仍會正確填充屏幕），我還需要它將圖像放大。

請查看 this website舉例。請注意，如果將屏幕旋轉90度，圖像變焦並保持居中狀態以仍填滿屏幕。

這是我目前有（如果我必須我會改變幻燈片的方法）。

HTML + JavaScript的（頭）

... 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script> 
     $(function() { 

      $("#slideshow > div:gt(0)").hide(); 

      setInterval(function() { 
       $('#slideshow > div:first') 
       .fadeOut(1500) 
       .next() 
       .fadeIn(1500) 
       .end() 
       .appendTo('#slideshow'); 
      }, 5000); 

     }); 
    </script> 

</head> 

<body> 
    <div id="slideshow"> 
     <div> 
      <img src="images/slide1.jpg"/> 
     </div> 
     <div> 
      <img src="images/slide2.jpg"/> 
     </div> 
     <div> 
      <img src="images/slide3.jpg"/> 
     </div> 
    </div> <!-- end slideshow --> 
</body>

CSS

#slideshow { 

    position: relative; 

    width: 100%; 

} 

#slideshow > div { 

    position: absolute; 

}

在此先感謝，和抱歉，如果這是一個嚴重的措辭問題，或者如果它沒有任何意義。

基蘭

來源

2014-03-30 Kieran Nolan

不要讓DIV絕對讓IMG絕對的。那就是你出錯的地方。
也使圖像爲100％，因此，它將採取了整個屏幕

CSS：

body{ 
padding:0;//so that there is no white space 
margin:0; 
} 
#slideshow { 
    display:block; 
    position: relative; 
    width: 100%; 
} 
#slideshow > div > img{ 
    display:block; 
    width:100%; 
    max-width:100%; 
    position:absolute; // here make it absolute 
} 
#slideshow > div { 
position:relative; // make it relative not necessary actually 
}

JS FIDDLE DEMO

來源

2014-03-30 08:13:04

啊這是有道理的，謝謝你在清除了:) –

調整大小幻燈片以填充屏幕

回答

相關問題